Question

我有一个页面，我需要将项目从可排序的项目拖放到可放置的容器中。它似乎没有工作，我希望有人可以告诉我为什么。从我看到的情况来看，我已经完成了所有连接，但是可放置的droppable不会从可排序中获得。

请注意，我可以执行以下操作并需要维护此功能：

将可拖动项目（不在可排序项目中）拖到droppable
将可拖动项目（不在可排序项目中）拖到可排序的

但我无法：

从可排序列表拖放到droppable

这是我的代码：

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

......还有小提琴： http://jsfiddle.net/eEJHb/4/

Answer 1

Jquery UI无法使用droppable连接可排序。 Droppable没有参数connectWith。你必须开发这样一个使用draggable＆amp; amp;可放置组合http://jsfiddle.net/shuklendu/uacc7/17/

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

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

在构建http://www.impresspages.org

时使用了很多jQuery-UI

Answer 2

我建议使用http://johnny.github.io/jquery-sortable/。它应该足够你的情况。

示例http://johnny.github.io/jquery-sortable/#handle应该正是您要找的。

如果您需要使用JqueryUI，也许http://api.jqueryui.com/droppable/#option-accept可能会有所帮助。

，不支持connectWith。

Answer 3

当项目被放置在droppable上时，您必须

克隆
手动附加到droppable，
将其从可排序中移除。
如果要将项目拖回，请在将其添加到dropppable

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

Sortable可以接收元素<---您想要的功能。

可疑人可以使用connectWith <---您想要的功能。

可拖动的可伸缩表<---您不需要的功能。

因此，根本不使用任何droppable，而是通过设置不存在的句柄来创建其可禁用拖动功能的sortable。

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

请不要忘记将您的drop事件更新为receive事件。

通过将可拖动对象添加到列出的connectWith类中，您还应该能够将可拖动对象拖动到此“禁用”可排序对象上。

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

请记住，Sortable实际上是设计为在元素容器上调用的，并赋予每个元素可排序性。如果您对液滴或其内容感到奇怪，则可能需要将其包装在容器中以获得所需的确切效果。

使用jQuery UI可排序到droppable

4 个答案: