After drag and drop select2 not working

Question

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

Answer 1

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/

Answer 2

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