I have it so that when you add a certain class it will insert a certain input field for that class.
I cannot figure out, however, how to remove an item already dropped?
I just want a nice little x or something next to each element dropped to remove it from the drop box.
Original Script without X button.
<script> $(function() { $( "#catalog" ).accordion(); $( "#catalog li" ).draggable({ appendTo: "body", helper: "clone" }); $( "#cart ol" ).droppable({ activeClass: "ui-state-default", hoverClass: "ui-state-hover", accept: ":not(.ui-sortable-helper)", drop: function( event, ui ) { $( this ).find( ".placeholder" ).remove(); var el=$("<li>"+ui.draggable.text()+"</li>").appendTo(this); } }); }); </script> |
Script with X button.
<script> $(function() { $( "#catalog" ).accordion(); $( "#catalog li" ).draggable({ appendTo: "body", helper: "clone" }); $( "#cart ol" ).droppable({ activeClass: "ui-state-default", hoverClass: "ui-state-hover", accept: ":not(.ui-sortable-helper)", drop: function( event, ui ) { $( this ).find( ".placeholder" ).remove(); var el=$("<li>"+ui.draggable.text()+"</li> <a href='#'>[x]</a>").filter('a').click(function(){el.remove()}).end().appendTo(this); } }); }); </script> |
Reference: Experts-exchange,JqueryUI