CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-sortablejquery-ui-draggable
Daniel Israel
Daniel Israel

Reputation: 393

Two Way Sorted/Unsorted Drag Drop with JQuery UI

I've got a complex drag/drop scenario that I just can't figure out. What I've come up with is here: jsfiddle.net/aTjMG/2/

On the left, I have a list of names. On the right, I have a group of teams. The list on the left should be alphabetized and not sortable. The user should be able to assign a person to a team by dragging from the list on the left to a team. The person's assigned to teams should be able to be sorted or moved to another team, or moved back to the unassigned pool.

I am able to move from the unassigned pool on the left to any team. I can sort the people in the teams. What I can't figure out from here is:

  1. How to move from team to team.
  2. How to move from team to unassigned.
  3. How to remove the person from their current location when dropped somewhere else
  4. How to prevent a person (on a team) from being duplicated when I sort the people

I think the big problem is that I can't figure out how to catch the "drop" of the drag-n-drop to change the unassigned person to assigned.

A kick in the right direction would be appreciated. An example that does just this would be majorly appreciated!

Upvotes: 0

Views: 726

Answers (1)

Owen Allen
Owen Allen

Reputation: 11948

If I understand the problem correctly this is really just multiple sorted lists.

Update to your fiddle: http://jsfiddle.net/aTjMG/8/

The key is simply declaring them all as sortable and not messing with draggable at all, which is used for more free-form drag and drop. 

$(function() {
  $( ".sortable" ).sortable({
    connectWith: ".sortable"
  }).disableSelection();
});

There is an example of this at the UI docs as well: http://jqueryui.com/sortable/#connect-lists

Upvotes: 1

Related Questions