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

Nick Craver · Accepted Answer · 2010-12-01 09:01:41Z

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();

answered Dec 1, 2010 at 9:01

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

rmap Over a year ago

Thanks Nick, tried that but even that didn't get me the ID or Class of the clone AND the orginal/clone dissapears

Nick Craver Over a year ago

@rmap - Are you duplicating the ID? Test the updated version which doesn't rely on it as a selector...if you're ending up with duplicated IDs then that's your issue, and you need to make them unique (or don't use them on the new element, they can simply be removed in my version above).

rmap Over a year ago

Again thanks Nick, but sadly no joy, what I find strange is that if I try to use helper: clone in #inputs_menu li ul nothing, but if I "redeclare" #inputs_menu li ul li as a sortable then it seems to work (i.i. the clone)

Nick Craver Over a year ago

@rmap - The original definitely shouldn't be dissapearing with the method above, since we're creating a new element, do you have an example page with your markup?

rmap Over a year ago

Nick I have simplified the page like this: LIST ONE <ul id="inputs_menu" class="fb_clearfix"><li><a href="#">Header 1</a><ul><?php for($x=0; $x<=5; $x++): ?><li id="str_<?php echo $x; ?>"><img src="images/icons/<?php echo $x; ?>.png" width="16px" height="16px" alt="Input type icon" /><?php echo $x; ?></li> <?php endfor; ?></ul></li></ul>LIST TWO<ul class="radius_10 inner_white" id="layout_form"></ul>

|

Collectives™ on Stack Overflow

JQuery UI sortables / draggable clone not working

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related