jQuery UI Functional Test Suite

Say it in Smalltalk, Do it with jQuery

Droppable Interaction

For additional documentation and examples please visit the official web-site.

Demo

Drag the colored items from the inventory on top into the list of selected items below. To remove selected items drag them out of the selected list.

Smalltalk

JQDroppableFunctionalTest>>renderContentOn: html
   self renderInstructionsOn: html.
   self renderInventoryOn: html.
   self renderSelectedOn: html

JQDroppableFunctionalTest>>renderInventoryOn: html
   html div class: 'inventory ui-corner-all'; with: [
      self colors do: [ :each |
         html div
            class: each;
            passenger: each;
            script: (html jQuery new draggable
               revert: true) ] ]

JQDroppableFunctionalTest>>renderSelectedOn: html
   html div
      class: 'selected ui-corner-all';
      script: (html jQuery new droppable
         onDrop: (html jQuery this load
            callbackDroppable: [ :event | self selected add: (event at: #draggable) ];
            html: [ :r | self renderSelectedItemsOn: r ]));
      with: [ self renderSelectedItemsOn: html ]

JQDroppableFunctionalTest>>renderSelectedItemsOn: html
   self selected do: [ :each |
      html div
         class: each;
         passenger: each;
         script: (html jQuery new draggable
            onStop: (html jQuery this effect
               percent: 1; puff;
               onComplete: (html jQuery this parent load html: [ :r |
                  self selected remove: each ifAbsent: [ ].
                  self renderSelectedItemsOn: r ]))) ]

Source

<>Drag the colored items from the inventory on top into the list of selected items below. To remove selected items drag them out of the selected list.</>
< =>
  < = =></>
  < = =></>
  < = =></>
</>
< = =></>
< =>/*<![CDATA[*/$("#id29").draggable({"revert":true});$("#id30").draggable({"revert":true});$("#id31").draggable({"revert":true});$("#id34").droppable({"drop":function(){$(this).load("/javascript/jquery-ui/droppableinteraction",["_s=C3jZ-uD6jt0VLzGC","_k=1o1QVtT_Y5rNpNRn","32","33="+encodeURIComponent($(arguments[1].draggable).attr("id")+","+$(arguments[1].helper).attr("id")+","+arguments[1].position.top+","+arguments[1].position.left+","+arguments[1].offset.top+","+arguments[1].offset.left)].join("&"))}});/*]]>*/</>