Question

到目前为止，我的代码是：https://jsfiddle.net/v3Lbjmes/43/

对于我的生活，我无法找到从顶部可排序列表拖动到可拖动区域以及从可拖动区域拖动到可排序列表的方法。

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'
   });
});

我看到有可用draggable支持connectToSortable进行排序但是甚至不能让它工作！

感谢您的帮助

Answer 1

示例：https://jsfiddle.net/Twisty/fnoqt6bL/1/

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

Answer 2

https://jsfiddle.net/odtncp8g/想出来了！看起来我必须在可排序和可放置的东西周围做一些手工杂乱的元素。

$(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');
      }
  });
}

将jquery ui可排序列表连接到可拖动区域

2 个答案: