Jquery draggable + sortable with custom html on drop event?

Question

Change the html when the drop element is in the droppable area.

Something like this: http://the-stickman.com/files/jquery/draggable-sortable.html

But when I drop the element, it changes the html.

Another example: I have a list of 2 drag-and-drop lists and a second droppable list, when I drag an item from the first list and I delete this item in the second list, this item will be cloned into the second list

drag and drop:

<a href="#">test</a> 

a fall:

 <a href="#">test</a> 

I want to change this html to

drag and drop:

 <a href="#">test</a> 

a fall:

 <div class="toggle"><a href="#">test</a></div> 

Answer 1

Check out this DEMO http://jsfiddle.net/yeyene/7fEQs/8/

You can customize the deleted item as you wish.

 $(function() { $( "#draggable li" ).draggable({ connectToSortable: "#sortable", helper: "clone", revert: "invalid" }); $( "#sortable" ).sortable({ revert: true, receive: function(event, ui) { var html = []; $(this).find('li').each(function() { html.push('<div class="toggle">'+$(this).html()+'</div>'); }); $(this).find('li').replaceWith(html.join('')); } }); }); 

Answer 2

This is a very simple example, but it should be used for several different cases. I took jQuery UI Draggable + Sortable , and in addition to the .sortable() widget, I bound the .droppable() widget to the <ul id="sortable"> element. Although this is not the smartest way in the drop event for a droppable widget, I check the value of the variable to identify the beginning of the moved item. (does this come from a sortable list or from one of my draggable objects?) If this comes from one of the draggables, I change the HTML code to what I want. Otherwise, it remains the same (because you are just sorting the sort order)

HTML

 <ul> <li id="draggable" class="ui-state-highlight">Drag me down</li> </ul> <br /> <br /> <br /> <ul id="sortable"> <li class="ui-state-default">Item 1</li> <li class="ui-state-default">Item 2</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li> <li class="ui-state-default">Item 5</li> </ul> 

Js

 $(function () { var origin = 'sortable'; $("#sortable").droppable({ drop: function (event, ui) { if (origin === 'draggable') { ui.draggable.html('<span>Look at this new fancy HTML!</span>'); console.log(ui.draggable); origin = 'sortable'; } } }).sortable({ revert: true }); $("#draggable").draggable({ connectToSortable: "#sortable", helper: "clone", revert: "invalid", start: function () { origin = 'draggable'; } }); }); 

jsfiddle for demo

Pretty boring example, because the new HTML is static. But let me say that you have a special helper for each drag and drop, and this should be your new HTML. Therefore, for example, you store some HTML fragments in an array and select the appropriate record suitable for the index, or something like that. It will look like this:

 var helpersArr = ['<input type="text" />', '<input type="file" />', '<input type="submit" value="Save" />']; var helper; //draggable helper: function () { helper = helpersArr[$(this).index()]; return helper; } //dropppable drop function ui.draggable.html(helper); 

jsfiddle for second example

Pretty sure you can achieve the same result by avoiding the helper variable and use ui.helper , but I couldn't figure out how to get the HTML part. If this does not work as you need, just let me know. In general, I think that you can use my examples as a starting point for various purposes related to modifying the HTML of the dropped element.

Answer 3

I had a similar problem that required a much more complex result. My system was dragged from a div on the left containing other divs with the names of the form elements and identifiers that fell into the sortable div on the right, which was supposed to become a web form. Since I need the div on the right to resemble the contents of the form without additional markup, using an unordered list would be out of the question if I did not want to do a bunch of “cleanups” on the way to the database. No thanks. In my example, when I drag from the list on the left, I have to use the identifier of the dragged item to find several things through ajax, and then put the label, form element and check in the list on the left based on the results of that ajax. For clarity, I removed ajax from my example.

So, essentially, you take two side-by-side divs, doing drag and drop and sorting with a list. The key is that Sortable has callback functions that you should use. The Get callback will only work when a new item is added to the sorted list. This is important because you must distinguish so that your changes do not occur in the sort. You cannot use only “receive” because if you try to manipulate html in this callback, you will affect the drag list and not the list you drag TO. To keep track of whether this is adding a list or drag and drop, I set the variable named "newlement" in $ .data to 1 if its list is being added, and then I check the update callback to see if I have to act on the draggable html or not. In my case, I do not want to do anything with the item that was dragging.

So HTML:

 <div class='master_list'> <div id="2">First Name</div> <div id="3">Last Name</div> </div> <div id="webform_container"> </div> 

And jQuery:

 $( ".master_list div" ).draggable({ connectToSortable: "#webform_container", helper: "clone", revert: "invalid" }); $( "#webform_container" ).sortable({ revert: true, cursor: 'pointer', placeholder: "placeholderdiv", connectWith: '.master_list', start: function() { /* Clear the value of newelement at start */ $(this).data('newelement', 0); }, receive: function(event, ui) { /* Get id from function and pass to the update to do stuff with */ $(this).data('id', ui.item[0].id); /* Set value of newelement to 1 only when new element is added to list */ $(this).data('newelement', 1); }, update: function(event, ui) { /* If newelement ==1, this is a new element to the list, transform it */ if ($(this).data('newelement') == 1) { var fieldname = ui.item.text(); ui.item.html('your new html here'); } } 

});

Answer 4

Check the sorting documentation. You can use the ui element to change the html of the dropped object

http://jqueryui.com/demos/sortable/#event-update

you can also see examples of connected lists here and events that were fired

http://jqueryui.com/demos/sortable/#connect-lists

An update event is where you should change the html of an element.