CODEWITHSUNDEEP
jqueryjquery-select2
Owais Kiani
Owais Kiani

Reputation: 375

After drag and drop select2 not working

I am using this script to drag and drop. It make clone of block to drop block. In block 1 there is multi select list. when 1 drop multi select list to block 2 it does not work.

 $('#sa_drag_block li').draggable({
            helper: "clone",
        });
        $('#sa_drop_block').droppable({
            drop: function (e, ui) {
                $(ui.draggable).clone().appendTo($(this));
            }
        });

Here is JSFiddle Link

Upvotes: 0

Views: 704

Answers (2)

Kevin Brown-Silva
Kevin Brown-Silva

Reputation: 41691

There were a few things working against you here, but I was able to make it work

  1. You were copying the output from a JavaScript plugin, and they generally aren't designed to be cloned at will.
  2. You were never initializing Select2 on the element after it was appended.

So you can fix these two issues for pretty much any JavaScript plugin by following a cycle when either initially dragging or dropping the elements

  1. Destroy the plugins using their destroy methods, select2('destroy') in this case.
  2. Clone the elements over to the drop location.
  3. Re-initialize the plugins on both the old and the new elements.

You can find the working, commented jsfiddle here: http://fiddle.jshell.net/uffhvenk/6/

Upvotes: 1

papkass
papkass

Reputation: 1289

Clone does not copy event handlers and data by default. Try clone(true).

Upvotes: 0

Related Questions