6

I have two lists. The first is comprised of draggable items (like this). It is connected to the second, which is a sortable list (like this).

Items from the first list can be added to the second list by dragging them there. They are then cloned, and green so the user can see they're unsaved additions.

What I want to happen is when you drag an item out of the second list, it will be marked for deletion, or sent back to the first list (if it's an unsaved addition). However I also want people to be able to sort the second list.

So if they drag an item out and release the mouse, it's supposed to be removed. If they drag an item out and back in again, it's not supposed to be removed.

I've tried wrapping a mouseup handler inside of a sortout, with that I end up with it working, but then you can't sort items in the list.

Any ideas of where I should take this?

Lorenzo
  • 29,081
  • 49
  • 125
  • 222
nu0
  • 53
  • 4
  • This question might be relevant: http://stackoverflow.com/questions/773717/please-recommend-a-jquery-plugin-that-handles-collision-detection-for-draggable – Anderson Green Dec 29 '12 at 05:23

2 Answers2

0

You need to bind to the drop event on the target list (ID "droplist"), like so:

$("#droplist").bind( "drop", function(event){
    $(this).append( event.dragTarget ); // or use prepend to put it at the top
    console.log("Dropped " + event.dragTarget.title);
    // trigger another event to do the work around checking if it is an unsaved addition
})

To remove an item on drag out you might try binding to a container element around the lists.

$("#background").bind( "drop", function(event){
    event.dragTarget.remove(); // guessing here
})

A code snippet would be handy to help any further.

stef
  • 14,172
  • 2
  • 48
  • 70
  • I'm using **jqueryui.com/demos/sortable/** and **jqueryui.com/demos/draggable/#sortable**. Neither have a 'drop' event. – nu0 Dec 22 '10 at 16:54
  • You may have to implement the droppable ui plugin. The revert demo sounds sort of like what you're looking to achieve. http://jqueryui.com/demos/droppable/#revert Alternatively, the draggable plugin has a "stop" event. http://jqueryui.com/demos/draggable/#events – Alexander Pendleton Dec 22 '10 at 18:02
-4

Using a different method, it seems this is messier than I thought it would be. I didn't test in IE yet, which would likely open up a new can of worms, so I'll let the dragging only be sorting and add a delete button. Cheers,

nu

nu0
  • 53
  • 4
  • what? aww. c'mon.. the title is misleading. its not your task that we are interested in, but the headline. – KevinDeus Mar 01 '12 at 01:03