I'm trying to create a combination of sortable lists which must follow a set of rules. There are 2 different lists which has draggable items which can be dropped onto a 3rd list.

The three lists are:

  • List 1 : Product A
  • List 2 : Product B
  • List 3 : Shopping Cart

What I'm having problems with is that Product B items must always be grouped in the Shopping Cart but also sortable within themselves. Product A items can sit below or above the Product B item group and also sortable between themselves.

Here are examples of Shopping Cart lists:

Shopping Cart Example 1

* [Product A1]
* [Product A2]
* [Product B1]
* [Product B2]
* [Product A3]

Shopping Cart Example 2

* [Product A2]
* [Product B2]
* [Product B1]
* [Product B3]

I have been able to get draggable and sortables working however I'm stuck on grouping Product B items, you can check out what I have done so far here http://jsbin.com/edeno3.

Has anyone else been able to accomplish this? Some help would be great!

Thanks in advance!

2 answers


Your question isn't so much about website design. It's actually more about programming (javascript/jQuery). You should try stackoverflow.com to get an answer.

Answered over 8 years ago by Matthew Pavkov
danwellman 5600

You could use the receive event to post-process the items into new sortable lists once they have been dropped onto the shopping basket

    receive: function() {
         //process items here
Answered over 8 years ago by danwellman