CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-sortable
imkingdavid
imkingdavid

Reputation: 1389

Create new element using jquery draggable/droppable and sortable

What I am trying to do is create a Card Sorting script. Basically, you have a listing of "cards" that you are then supposed to sort into any number of "stacks" (lists). I am using the jQuery-UI sortable plugin and am able to connect lists to drag between them. The issue I am facing is that I cannot figure out a way to make it check to see if the card is hovering over blank space or an existing list, and if the former, when I drop it, create a new list.

I have tried using draggable/droppable so that the card is not initially confined to sortables, but I still cannot get it to recognize where the card is. I'm also thinking that draggable/droppable will not be what I need because then I cannot move the card from a sortable back to original listing (draggable).

Ultimately, I'll be using jQuery's ajax ability to save the results of the sorting, but I can't do that until I can get it to create new lists.

Does anyone have any experience in doing something like this? Any help would be great!

Upvotes: 2

Views: 2545

Answers (2)

Goran Mottram
Goran Mottram

Reputation: 6304

Although I couldn't figure out how to get the event for creating a new stack if dragged onto an empty part of the screen, the best I could do is by dragging cards onto a new area.

See the following jsFiddle.

The code allows you to drags cards from the deck to either an existing stack or a new stack, and also back to the deck if need be. It also removes stacks (but not the deck) if left empty after an item being dragged to a new location.

Hope it helps.

Upvotes: 0

PriorityMark
PriorityMark

Reputation: 3247

Sorry for the late response, but was working on it and didn't notice the other answer.

My variation does something pretty comparable to Goran's. http://jsfiddle.net/fordlover49/rxVPq/

Note that you'd need to add the titles, and everything else according to what you're wanting still, but it accomplishes the basic goal, while keeping the original items, and only have one set of options for the sortable lists..

While Goran's solution appears to work, I would caution you that the method he's using to move the objects is dangerous and incorrect. If you had any event binders on the items that's moving to the new list, they will be lost because he's removed the old items that you had the event bindings to from the DOM.

Upvotes: 4

Related Questions