0

我有一个页面，我需要将项目从可排序的内容拖到可放置的容器中。它似乎不起作用，我希望有人能告诉我原因。从我所看到的，我有所有的连接，但 droppable 不会从 sortable 接收到 drop。

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

  1. 将可拖动项（不在可排序项中）拖到可放置项中
  2. 将可拖动项（不在可排序项中）拖到可排序项中

但我不能：

  1. 从 sortable 拖动到 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/

4

4 回答 4

1

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

于 2014-02-05T18:35:36.950 回答
0

我会推荐使用http://johnny.github.io/jquery-sortable/。在你的情况下应该足够了。

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

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

于 2013-04-06T16:49:26.597 回答
0

当物品被放置在可放置物品上时，您必须

  1. 克隆它
  2. 手动附加到 droppable，
  3. 从可排序中删除它。
  4. 如果您想将您的项目拖回来，请在将其添加到 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>

于 2018-01-24T03:37:09.447 回答
0

Sortables 可以接收元素 <--- 你想要的功能。

Sortables 可以使用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 实际上被设计为在元素容器上调用并赋予每个元素可排序性。如果您对水滴或其内容物感到奇怪，您可能需要将其包装在容器中以获得所需的确切效果。

于 2019-01-06T17:16:44.840 回答