Sortable to droppable with jQuery UI

Question

I have a page and I need to drag items from a sortable into a droppable container. It doesn't seem to be working and I'm hoping someone can tell me why. From what I see, I have all the connectivity in place but the droppable won't receive drop from the sortable.

Please note that I'm able to do the following and need to maintain this functionality:

1. drag a draggable item (not in the sortable) into the droppable
2. drag a draggable item (not in the sortable) into the sortable

But I'm not able to:

3. drag from the sortable into the droppable

Here's my code:

$(function() {
  $('.drag').draggable({
    helper: 'clone',
    connectToSortable: '#sortable'
  });
  $("#sortable").sortable({
    connectWith: '#drop'
  });
  $("#drop").droppable({
    tolerance: 'pointer',
    connectWith: '#sortable',
    drop: function (evt, ui) {
        var $destination = $(this); 
        ui.draggable.appendTo( $destination ); 
    }
  }).draggable();
});

...and there's the fiddle: http://jsfiddle.net/eEJHb/4/

Answer 1

Sortables can receive elements <--- feature you do want.

Sortables can use connectWith <--- feature you do want.

Sortables can be dragged <--- feature you DON'T want.

So instead of using a droppable at all, create a sortable with its drag features disabled by setting a non-existent handle.

$("#drop").sortable({
    handle: '.fake_class_that_does_not_exist',
    tolerance: 'pointer',
    connectWith: '#sortable',
    receive: function (evt, ui) {
        var $destination = $(this); 
        ui.draggable.appendTo( $destination ); 
    }
});

Don't forget to update your drop event to a receive event.

You should also be able maintain the ability to drag your draggable to this 'disabled' sortable by adding it to the connectWith classes listed.

$('.drag').draggable({
    helper: 'clone',
    connectToSortable: '#sortable, #drop'
});

Remember that Sortable is actually designed to be called on a container of elements and gives each of the elements sortability. If you experience weirdness with the drop or its contents, you may need to wrap it in a container to get the exact effect you need.

Answer 2

When the item is dropped on droppable, you'll have to

1. Clone it
2. Append to droppable manually,
3. Remove it from sortable.
4. If you want to drag your item back, make it draggable once it is added to dropppable

$( function() {
var draggableOptions = {
  connectToSortable: ".list",
  helper: "clone",
  revert: "invalid",
  revertDuration: 0,
  start:function(ev,ui){
    $(ev.target).hide();
    ui.helper.data('dropped', false);
  },
  stop:function(ev,ui){
    if(ui.helper.data('dropped')){
      ev.target.remove();
    }else{
      $(ev.target).show();
    }
  }
};
var sortableOptions = {
    helper: 'clone',
    connectWith: ".list",
    placeholder : "sortable-item-placeholder",
    receive: function (event, ui) {
        ui.item.remove();
    },
    beforeStop:function(ev,ui){
      if(ui.helper.data('dropped')){
        ui.item.remove();
      }
    }
};
$( "#sortable" ).sortable(sortableOptions);

var droppableOptions = {
  drop:function(ev,ui){
    if(!ui.helper.is("tr")){
      var $obj = ui.helper.clone();
      $obj.css({
        position: 'relative',
        top: "0px",
        left: "0px"
      });
      $($obj).draggable(draggableOptions);
      $obj.appendTo($(this).find("td ul"));

      ui.helper.data('dropped', true);
      $(this).removeClass("drop-highlight");
    }
  },
  over: function(){$(this).addClass("drop-highlight");},
  out: function(){$(this).removeClass("drop-highlight");},
};
$( "tr" ).droppable(droppableOptions);
});

ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
li { margin: 5px; padding: 5px; height:2em;}
.droppable{
  width:100%;
}
table{
  width:100%;
}
td{
  height : 2.5em;
  border: 1px solid black;
}
.drop-highlight{
  background: gray;
}
.sortable-item-placeholder{
  background: yellow;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>


<ul id="sortable" class="list">
  <li class="ui-state-default green">Sample Task 1</li>
  <li class="ui-state-default green">Item 2</li>
  <li class="ui-state-default green">Item 3</li>
  <li class="ui-state-default green">Item 4</li>
  <li class="ui-state-default green">Item 5</li>
</ul>

<table id="droppable-table">
  <tbody>
    <tr><td><ul class="droppable">1</ul></td></tr>
    <tr><td><ul class="droppable">2</ul></td></tr>
    <tr><td><ul class="droppable">3</ul></td></tr>
    <tr><td><ul class="droppable">4</ul></td></tr>
    <tr><td><ul class="droppable">5</ul></td></tr>
    <tr><td><ul class="droppable">6</ul></td></tr>
  </tbody>
</table>

Answer 3

Jquery UI can't connect sortable with droppable. Droppable has no parameter connectWith. You have to develop such a feature of use draggable & droppable combination http://jsfiddle.net/shuklendu/uacc7/17/

$("#draggable li").draggable({
    revert: true});

$('#droppable').droppable({
    accept: 'li',
    drop: function () {
    alert('success') }
});

Used a lot of jQuery-UI while building http://www.impresspages.org

Answer 4

I would recommend using http://johnny.github.io/jquery-sortable/. It should suffice in your case.

The example http://johnny.github.io/jquery-sortable/#handle should be exactly what you are looking for.

If you need to use JqueryUI, perhaps http://api.jqueryui.com/droppable/#option-accept might help. connectWith is not supported by droppable.