JQuery UI sortables / draggable clone not working

Question

Hi folks am using UI fro some drag drop, problem is that I cannot get the "clone" to fire.

I have 2 <ul><li></li></ul> lists and I want to drag from list 1 to list 2 OK that bit is easy, but getting the "clone" to remain in list one is not. What I need / want to happen is drag from list 1 to list 2 (one way drag only), then on receive in list 2 hide remove the dragged item - OK sounds strange but the ID of the dragged item loads a page based on that ID into the created "empty" <li> in the 2nd <ul>

So far "we" looking something like this:

 $('ul#inputs_menu li ul').sortable({

connectWith: "ul#layout_form",

}).disableSelection();

$('ul#inputs_menu li ul li').sortable({

helper: "clone"

}).disableSelection();


$(' ul#layout_form' ).sortable({

receive: function(event, ui) {

var new_item = (ui.item).attr('id');

$('ul#layout_form').append('<li><div id="'+new_item.substr(4)+'"class="'+new_item.substr(4)+' inputs radius_10" ></div></li>');

$('#'+new_item.substr(4)).load('includes/text.php?fld_name='+new_item.substr(4));

}

}).disableSelection();

Suggestions please - thanks

Answer 1

Instead of ui.item which is the original, you want ui.helper here, which is the clone. Also, you can cut down on overall code and selector work by using .appendTo() instead, like this:

$('#inputs_menu li ul').sortable({
  connectWith: "ul#layout_form",
}).disableSelection();
$('#inputs_menu li ul li').sortable({
  helper: "clone"
}).disableSelection();

$('#layout_form' ).sortable({
  receive: function(event, ui) {
    var new_item = ui.helper.id.substr(4);
    $('<li><div id="'+new_item+'"class="'+new_item+' inputs radius_10" ></div></li>')
      .appendTo('#layout_form')
      .find("div").load('includes/text.php?fld_name='+new_item);            
  }
}).disableSelection();