4

JSFiddle: https://jsfiddle.net/dy556efs/2/

The elements on the left side should be cloned when dropped over to the right side. Currently, they are completely moved over - and can't get the clone helper to work properly.

Could you point me in the right direction?

$(".social-msl-link-label").draggable({
    connectToSortable: ".social-msl-group-list",
    revert: "invalid",
    helper: "clone"
});

$(".social-msl-links-order li").droppable({
    accept : ".social-msl-link-label",
    tolerance: 'pointer',
    greedy : true,
    hoverClass: 'highlight',
    drop: function(ev, ui) {
        $(ui.draggable).detach().css({position : 'relative', top: 'auto',left: 'auto'}).appendTo(this);
    }
});
Kara
  • 6,115
  • 16
  • 50
  • 57
Kobius
  • 674
  • 7
  • 28

1 Answers1

5

Based on the documentation for the helper property it seems like the element is only cloned while dragging it. In other words, you still have to manually clone the element before detaching/appending it. Use the .clone() method before detaching it:

Updated Example

$(".social-msl-links-order li").droppable({
  accept: ".social-msl-link-label",
  tolerance: 'pointer',
  greedy: true,
  hoverClass: 'highlight',
  drop: function(ev, ui) {
    $(ui.draggable).clone(true).detach().css({
      position: 'relative',
      top: 'auto',
      left: 'auto'
    }).appendTo(this);
  }
});

If you want to remove duplicates, you could iterate over the droppable elements and compare the text of the previously dropped element with the siblings. Inside of the drop callback:

Updated Example

// ...
$(this).siblings().filter(function () {
  return $(this).text().trim() === $(ui.draggable).text().trim();
}).empty();
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
  • 1
    Perfect, thank you! Works great, would you know how to extend this further so that the right column will only accept 1 of each item. So in the JSFiddle example, if you added "Facebook" more than once, it would remove the previous version? – Kobius Jan 05 '16 at 04:02
  • 1
    amazing work, thank you for your help! Actually makes sense now that you've written it out, couldn't figure out a way to compare other elements before. – Kobius Jan 05 '16 at 04:33
  • @JoshCrozier why `detach()`..? – T J Jan 05 '16 at 06:52
  • 1
    @TJ - That's the code the OP was originally using. You can read the difference between `remove()` and `detach()` in the documentation. – Josh Crozier Jan 05 '16 at 12:06
  • 1
    @JoshCrozier I though it was added by you for some purpose, nvm. since `clone()` method returns an in memory element, I was wondering what's the use of calling `detach()` on it... I didn't see OP's fiddle. Looking at it again, just noticed that `ui.draggable` is a jquery object no need to do `$(ui.draggable)`... – T J Jan 05 '16 at 13:12