Connect a jquery ui sortable list to a draggable area

0
votes

Here is my code so far: https://jsfiddle.net/v3Lbjmes/43/

For the life of me, I can't figure out a way to drag from the top sortable list into the draggable area and from the draggable area to the sortable list.

HTML:

<div class="sort">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
<div class="clear"></div>
<hr>
<div class="drag">
  <div class="item">5</div>
</div>

CSS: 

.item{
  border-style: solid;
  float: left;
  width: 100px; 
  height: 100px;
  margin: 2px;
  background-color: #FFF;
}
.clear{
  clear: both;
}
.drag{
  width: 100%;
  height: 300px;
}

JS:

$(document).ready(function(){
   $(".sort").sortable();
   $(".drag .item").draggable({
       containment : '.contain',
       connectToSortable : '.sort'
   });
});

I see there is support from draggable to sortable with connectToSortable but can't even get that to work!

Thanks for the help

2
jqueryjquery-uijquery-ui-sortablejquery-ui-draggable
You need a Droppable area for dragging out of Sort into Drop area. You can drag into a Sort no problem. - Twisty
So do you need a Sort & Drag'n'Drop or just two sortables? - Twisty
I need the functionality like it is now, a sortable at the top and a draggable at the bottom but need to be able to move between them freely - Greg Alexander
Then I would use a Sortable for both. - Twisty
Well I need the bottom part to move around for comparing the items. It is for a quilt design company and they would be dragging swatches around at the bottom from the list at that top. - Greg Alexander

2 Answers

1
votes

https://jsfiddle.net/odtncp8g/ Figured it out! Looks like I had to do some manual juggling of the elements when swapped around the sortable and droppable.

$(document).ready(function(){
    bind_sortable();
  bind_draggble();

  $(".drag").droppable({
    accept : '.sort div',
    drop: function(ev, ui) {
        $(ui.draggable).clone(true).remove().appendTo(this);
        $(ui.draggable).remove()
        bind_draggble();
        bind_sortable();
    }
  });
});

function bind_draggble(){
    $(".drag div").draggable({
    containment : '.contain',
    connectToSortable : '.sort'
  });
}

function bind_sortable(){
    $(".sort").sortable({
            receive : function( event, ui ){
        ui.item.draggable('disable');
      }
  });
}
0
votes

Example: https://jsfiddle.net/Twisty/fnoqt6bL/1/

$(function() {
  $("#sort-1, #sort-2").sortable({
    connectWith: ".sort",
    containment: $(".contain"),
    items: "> div.item"
  }).disableSelection();
});