before

jquery_minihack.html

<apex:page standardController="Opportunity" extensions="jquery_minihack">
<style>
    #myTitle {
        font-size:20px;
        text-align: center;
        
    }
    
    .element {
        width:50%;
        float:left;
    }
    
    .droppableArea {
        height:200px;
        background: #CCC;
        font-weight:bold;
    }
    .dropped {
        background: #BCEE68;
    }
    
</style>
        
<apex:detail subject="{!theOpp.Id}" relatedList="true"/>
<apex:form >
    <h1 id="myTitle">Drag and Drop Products: Mini-Hack</h1>
    
    <div style="width:100%;">
        <div class="element">
            <apex:pageBlock >
                <apex:pageBlockButtons >
                    <apex:commandButton value="Select" action="{!addProduct}" rerender="addProductsSection"/>
                </apex:pageBlockButtons>
                
                <apex:pageBlockTable var="p" value="{!allProducts}">
                    <apex:column headerValue="Select" >
                        <apex:inputCheckbox value="{!p.selected}" />
                    </apex:column>
                    <apex:column value="{!p.prod.Name}" />
                    <apex:column value="{!p.prod.Product2.ProductCode}" />
                </apex:pageBlockTable> 
            </apex:pageBlock>
        </div>

        <div class="element droppableArea" >
            Drop Products Here
        </div>

        <div class="element">
            <apex:outputPanel id="addProductsSection">
                <apex:outputPanel rendered="{!showResults}">
                    <apex:pageBlock >
                        <apex:pageBlockButtons >
                            <apex:commandButton value="Add" action="{!createLineItems}" />
                        </apex:pageBlockButtons>
                        <apex:pageBlockTable var="p" value="{!selectedProducts}">
                            <apex:column headerValue="Product Name" >
                                <apex:outputField value="{!p.prod.Name}" />
                            </apex:column>
                            <apex:column headerValue="Quantity">
                                <apex:inputText value="{!p.Quantity}" />
                            </apex:column>
                            <apex:column headerValue="Sales Price">
                                <apex:inputText value="{!p.SalesPrice}" />
                            </apex:column>
                        </apex:pageBlockTable> 
                    </apex:pageBlock>
                </apex:outputPanel>
            </apex:outputPanel>
        </div>
    </div>
</apex:form>
<apex:includeScript value="{!$Resource.jquery}"/>
<apex:includeScript value="{!$Resource.jqueryui}"/>
<!-- <apex:includeScript value="{!$Resource.coffeescript}"/> -->

<!-- now the actual code -->
<script>
    $(function() {
        $( ".dataCell" ).draggable();
        $( ".droppableArea" ).droppable({
            drop: function( event, ui ) {
                var id = $(this).attr("id");
                console.log(ui['draggable'][0]);
                $( this )
                // .addClass( "dropped" )
                .animate({backgroundColor: '#BCEE68'}, 'slow').animate({backgroundColor: '#CCC'}, 'slow')

            }
        });
      });
            
</script>

</apex:page>