Question

In following code (fiddle):

<div class="connected">
    <div class="myDivs">Hello 01</div>
    <div class="myDivs">Hello 02</div>
    <div class="myDivs excludeThisCss">Hello 03</div>
    <div class="myDivs">Hello 04</div>
    <div class="myDivs">Hello 05</div>
    <div class="myDivs excludeThisCss">Hello 06</div>
    <div class="myDivs">Hello 07</div>
    <div class="myDivs">Hello 08</div>
    <div class="myDivs excludeThisCss">Hello 09</div>
    <div class="myDivs">Hello 10</div>
</div>

<div class="connected">
    <div class="myDivs">Hello 01</div>
    <div class="myDivs">Hello 02</div>
    <div class="myDivs excludeThisCss">Hello 03</div>
    <div class="myDivs">Hello 04</div>
    <div class="myDivs">Hello 05</div>
    <div class="myDivs excludeThisCss">Hello 06</div>
    <div class="myDivs">Hello 07</div>
    <div class="myDivs">Hello 08</div>
    <div class="myDivs excludeThisCss">Hello 09</div>
    <div class="myDivs">Hello 10</div>
</div>

JS:

$(function() {
    $( ".connected" ).sortable({
        connectWith : ".connected",
        items       : ".myDivs:not(.excludeThisCss)"
    }).disableSelection();

});​

CSS:

.connected {
    float: left;
    margin: 6px;
}
.myDivs {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    font-family: sans-serif;
    width: 120px;
    background: #F2F2F2;
    cursor: pointer;
    border: 1px solid #D9D9D9;
    color: #1C94C4;
}
.excludeThisCss {
    background: pink;
}
​
​

I’m attempting to execute code when an item dragged & dropped. Is there a event that fires when a draggable is dropped on a sortable ?

Answer 1

Yes you can use the stop event :

stop: function(event, ui) { ... }

Updated jsfiddle here and docs for the event are here

the ui object consists of the following :

• ui.helper – the current helper element (most often a clone of the item)
• ui.position – current position of the helper
• ui.offset – current absolute position of the helper
• ui.item – the current dragged element
• ui.placeholder – the placeholder (if you defined one)
• ui.sender – the sortable where the item comes from (only exists if you move from one connected list to another)