CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-sortablejquery-ui-draggablejquery-ui-droppable
zeropsi
zeropsi

Reputation: 694

jQueryUI sortable (with connected lists), draggable and droppable - issues with them all working together

I have three elements: #a, #b and #c.

#a and #b are main elements that I use the sortable function with in order to swap items from one element to the other.

$( "#a" ).sortable({
    connectWith: "#b",
});

$( "#b" ).sortable({
    connectWith: "#a",
});

However, I also want to be able to drag/drop an element from #a to #c, but not from #b to #c. I am running into an issue where my code is allowing me to drag any item from #b to #c. Here is my drag/drop code:

$( "#a" ).draggable();
$( "#c" ).droppable();

Any ideas how I can stop the #b element from allowing its elements to be dragged/dropped to #c?

Upvotes: 1

Views: 902

Answers (1)

Rahul Gupta
Rahul Gupta

Reputation: 10141

I have updated your fiddle. Here is the working DEMO

Updated code

JS:

$( function() {
    $( "#a, #b, #c" ).sortable({
      connectWith: ".connectedSortable",
  });

  //$( "#a" ).draggable();
  $( "#c" ).droppable({
    accept: ".acceptable",
    drop: function (e, ui) {
        var dropped = ui.draggable;
        var droppedOn = $(this);
                $(this).append(dropped.clone().removeAttr('style').removeClass("item").addClass("item-container"));
          dropped.remove();
      }
  });
});

HTML:

<ul id="a" class="connectedSortable">
  <li class="acceptable">Item 1 (acceptable)</li>
  <li class="acceptable">Item 2 (acceptable)</li>
  <li class="acceptable">Item 3 (acceptable)</li>
  <li class="acceptable">Item 4 (acceptable)</li>
  <li class="acceptable">Item 5 (acceptable)</li>
  <li class="acceptable">Item 6 (acceptable)</li>
  <li class="acceptable">Item 7 (acceptable)</li>
  <li class="acceptable">Item 8 (acceptable)</li>
</ul>

<ul id="b" class="connectedSortable">
  <li>Item 9</li>
  <li>Item 10</li>
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
  <li>Item 16</li>
</ul>

Only (acceptable) items are droppable here
<ul id="c">
</ul>

Upvotes: 1

Related Questions