Clone the dropped element

[netcult]

Hello

Nice work! One of the examples says "Clone items on drag", but they don't seem to be cloned. Or maybe I have a different understanding of "clone". What I want to achieve is a list on the left with types of form elements which you can drag into a second list on the right. On drag & drop the type dragged should be kept available in the left list though, as you want to be able to add another form element of the same type. In a second step I want to change the content of the dropped element from a simple text like "Radio button list" to an actual list of radio buttons (html), but that's probably a question to ask somewhere else, or find out myself :-)

Thanks a lot!

[roartex]

Here is the code you want to be using.

I am using this plugin to create a similar thing to what you are doing, i have a toolbar on the left side that allows the user to drag elements onto the page, once on the page you can click an element and a tooltip comes up to edit it. Good luck with your project.

$(".left-list").sortable({ group: 'my-group', onDragStart: function (item, container, _super) { // Duplicate items of the no drop area if(!container.options.drop) item.clone().insertAfter(item) _super(item) } }); $(".right-list").sortable({ group: 'my-group' });