Sortable + Draggable - Getting reference to the object being dropped into a sortable
Hi,
I'm trying to create a toolset from a list of draggable controls by
connecting them to lists of sortables. It works great realtime without
saving. But I would need to get a hand on the dropped object to be
able to set its new ID. But I only get a reference to the object's
clone.
here is my code for a start with the php integration removed:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<style type="text/css">
.zone {min-height: 50px}
.zone,
#modules { list-style-type: none; margin: 0; padding: 0; width:
60%; }
.zone li,
#modules li { margin: 0 5px 5px 5px; padding: 5px; font-size:
1.2em; height: 1.5em; }
html>body #modules li { height: 1.5em; line-height: 1.2em; }
.ui-state-highlight { height: 1.5em; line-height: 1.2em; }
</style>
<script type="text/javascript">
$(function() {
var loading_el = $("#loading");
loading_el.ajaxStart(function(){
$(this).show();
$('li.module').draggable( 'disable' );
});
loading_el.ajaxStop(function(){
$(this).hide();
$('li.module').draggable( 'enable' );
});
var loading_top = ($(window).height() / 2) - 50;
var loading_left = ($(window).width() / 2) - 100;
loading_el.css({'position' : 'absolute',
'top' : loading_top,
'left' : loading_left
});
$("li.module").draggable({
connectToSortable: '.zone',
helper: 'clone',
start: function(event, ui){
$(ui.helper).css({'border' : 'solid 1px red'});
}
});
$(".zone").sortable({
placeholder: 'ui-state-highlight',
connectWith: '.connectedSortable',
receive: function(event, ui) {
var dragged_el = $(ui.helper);
var pageID = dragged_el.attr('pageid');
var blockID = dragged_el.attr('blockid');
dragged_el.fadeOut();
}
});
});
</script>
<div class="demo">
<ul id="modules" class="connectedSortable">
<li id="module-text" class="ui-state-default module" pageid="1"
blockid="-1">Texte</li>
<li id="module-achievements" class="ui-state-default module"
pageid="1" blockid="-1">Réalisation</li>
<li id="module-news" class="ui-state-default module" pageid="1"
blockid="-1">Nouvelles</li>
<li id="module-contact" class="ui-state-default module" pageid="1"
blockid="-1">Contact</li>
<li id="module-sitemap" class="ui-state-default module" pageid="1"
blockid="-1">sitemap</li>
</ul>
<strong>Zone 1</strong>
<ul id="blocks" class="zone connectedSortable">
</ul>
<strong>Zone 2</strong>
<ul id="blocks2" class="zone connectedSortable">
</ul>
<strong>Zone 3</strong>
<ul id="blocks3" class="zone connectedSortable">
</ul>
</div>
<div id="loading" style="z-index: 100000; display: none; height: 50px;
width: 100px; border: solid 5px #666; background-color: #fff; color:
#999; line-height: 50px; text-align: center">
saving...
</div>