DND - DROP INTERACTION - FADE

by bizamajig

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<div class="demo">
    
<ul>
    <li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>

<ul id="sortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>

</div>

CSS

.demo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
.demo li { margin: 5px; padding: 5px; width: 150px; }

JavaScript

$("#sortable").sortable({
    revert: true,
    stop: function(event, ui) {
/*
if(!ui.item.data('tag') && !ui.item.data('handle')) {
*/
      ui.item.data('tag', true);
            ui.item.fadeTo(400, 0.1);
            ui.item.fadeTo(400, 1);
/*
    }
*/
    }
});
$("#draggable").draggable({
    connectToSortable: '#sortable',
    helper: 'clone',
    revert: 'invalid'
});
$("ul, li").disableSelection();