0

I'm using Ali Farhadi's HTML5 sortable jQuery plugin to make <li> elements draggable (and sortable) within an <ul>

http://farhadi.ir/projects/html5sortable/

I want to extend the functionality to also be able to remove elements from the list, and I thought an elegant UI for this would be to either drag the element into some "trash" <div> somewhere on the page, or maybe just drag it outside of the <ul> bounds (where the cursor turns into a "stop" icon).

However, I'm quite new to jQuery (although somewhat semi-proficient in JavaScript), so maybe someone can help me add this functionality to the js?

joakimk
  • 822
  • 9
  • 26
  • There's post about it [http://stackoverflow.com/questions/9796934/jquery-ui-remove-element-when-dropped-into-a-div-using-droppable][1] [1]: http://stackoverflow.com/questions/9796934/jquery-ui-remove-element-when-dropped-into-a-div-using-droppable Good Luck – Luan Sep 07 '15 at 13:40
  • @Luan you realize that this is another plugin? – Roko C. Buljan Sep 07 '15 at 13:43
  • 1
    There's post about it [http://stackoverflow.com/questions/9796934/jquery-ui-remove-element-when-dropped-into-a-div-using-droppable][1] [1]: http://stackoverflow.com/questions/9796934/jquery-ui-remove-element-when-dropped-into-a-div-using-droppable Good Luck – Luan Sep 07 '15 at 13:43
  • Use the `complete` callback to remove the dragged item like `$(this).remove()` – Roko C. Buljan Sep 07 '15 at 13:44
  • Thanks for the pointers, but I'm still at a loss. jQuery is new to me, so I really don't know more than the very basics. I can see where, in the code of `jquery.sortable.js`, the *drop* "event" happens, but I don't know how to check if it occurs within the `
    `. I've made a Fiddle, which also hints at another problem I'm trying to solve; how to add an "Add item"-button, which adds a new `
  • ` which also becomes draggable (and deletable). Please take a look at http://jsfiddle.net/jokke/uxp12bjv/
– joakimk Sep 07 '15 at 21:49
  • I was able to "restart" the draggable plugin after adding a new `
  • `, by doing `$('.sortable').sortable('destroy'); $('.sortable').sortable();` Then, the new items become draggable, too. However, I still can't handle the *drop* or *over* callback at all (if that's what it's called).
    • – joakimk Sep 07 '15 at 22:38