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> --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en -~----------~----~----~----~------~----~------~--~---
