jquery multiple draggable and sortable

Question

With jquery Draggable and sortable I would like to make a system where students can answer a question (blue boxes) with multiple answers (red box) and sort the answers. The number of blue boxes is unknown and therefor I made a class of it named 'container'.

I've set it up and placed it on jsfiddle: http://jsfiddle.net/smethorst/h3ZNd/2/

HTML

<ul id="answers">
  <li>Item 1 (+)</li>
  <li>Item 2 (+)</li>
  <li>Item 3 (+)</li>
  <li>Item 4 (+)</li>
</ul>

<ul class="container">
</ul>
<ul class="container">
</ul>

JQuery $(function() {

    $("#answers li").draggable({
      connectToSortable: '.container',
      helper: 'clone',
      revertDuration: 0
    });

    $(".container").sortable({
      revert: true
    });

    $(".container li").draggable({
      connectToSortable: '.container',
      revert: "invalid",
    });
});

I have places the solution at jsfiddle: http://jsfiddle.net/smethorst/h3ZNd/2/

So, the problem is that it isn't possible to drag and drop a answer to another question box. So after dragging an item from the red box to the blue box, it should be possible to drag it to another blue box (no clone).

I've tried different things after a drop, like these things, but it didn't work:

$(this).append($(ui.draggable));
$(".container").sortable('refresh');

Is there a solution for it? Thanks in advance.

nirazul · Accepted Answer · 2013-07-28 11:06:40Z

1

Easy enough, there's an option in sortable that you can use: connectWith. It accepts a selector to connect other sortables:

$(".container").sortable({
    connectWith: '.container',
    revert: true
});

JSFiddle

Your next problem will probably be that every box should only accept one element. So you need to delete the other elements in the sortable dynamically on drop of an element, which is trickier than I thought.

edited Jul 28, 2013 at 11:06

answered Jul 28, 2013 at 10:37

nirazul

3,9654 gold badges30 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stefan Over a year ago

Thank you, that is a great solution! Every box should accept a element multiple times, so that isn't any problem. But another problem occurred when there are some default variables, the items will collapse each other. When a item is moving from one blue box to another one, one item will disappear. jsfiddle.net/smethorst/h3ZNd/6

Collectives™ on Stack Overflow

jquery multiple draggable and sortable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related