Draggable jquery UI sortable

Draggable jquery UI sortable

by Fahd Murtaza

HTML

<h2>Draggables:</h2>
<ul id="drag-me" class="ui-widget ui-corner-all">
    <li style="cursor: pointer;">drag-one</li>
    <li style="cursor: pointer;">drag-two</li>
    <li style="cursor: pointer;">drag-three</li>
</ul>
<br> 
<h2>Sortables: </h2>
<ul id="sort-me">
    <li style="cursor: pointer;">sort-one</li>
    <li style="cursor: pointer;">sort-two</li>
</ul>

<br />
<button id="button-1">Remove</button>
<button id="button-2">Receive</button>
<br/><br/>
<h2>Trash Bucket</h2>
<ul id="droppable">
</ul>

CSS

li {
    margin: 2px;
    border-color: black;
    border: solid;
    background-color: green;
    width: 90px;
}
#droppable {
    height: 200px; 
    width: 200px; 
    border-color:black; 
    border: solid;
}

JavaScript

$(document).ready(function() { 
    $("#drag-me").find("li").draggable({
       connectToSortable: "#sort-me",
       helper: "clone",
       revert: "invalid"
    }).disableSelection();
       
    function customTriggerFunction(e, ui) {
        // in my app, this function originally relied on the ui argument,
        // but it is null when I trigger the "stop" event manually   
        alert("remove event fired: "); 
        alert(ui);        
    };
    
    function manuallyTriggerRemoveEvent() {
        // here i select the sortable and manually trigger the remove event.
        // The ui argument does not get set.
        $("#sort-me").trigger("sortremove");
    };
    
    function manuallyTriggerReceiveEvent() {
        // This doesn't seem to work, because the event was defined
        // when the sortable was enabled (instead of in a separate
        // call to the .bind() method as with the "remove" event example.
        $("#sort-me").trigger("sortreceive");
    };

    // This button demonstrates that the ui argument is undefined when 
    // manually triggering the remove event
    $("#button-1").click(function() {manuallyTriggerRemoveEvent();});

    // This button demonstrates that I can't manually trigger an event
    // when it is defined in the original call to .sortable()
    $("#button-2").click(function() {manuallyTriggerReceiveEvent();});

    
    $("#sort-me").sortable({
        receive: function(e, ui) { alert("receive event fired: "); alert(ui); }})
    .bind({      
        sortremove: function(e, ui) {alert("UI in sortremove: " + ui); customTriggerFunction(e, ui);}
    });
    $("#sort-me").find("li").disableSelection();
    
    $("#droppable").droppable({
        accept: "#sort-me li",
        drop: function (e, f) {
            f.draggable.remove();
        }
    });
});