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 nirazul · Accepted Answer · 2013-07-28T10:37:49

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.

jquery multiple draggable and sortable

1 Answers