如何使用jquery将项目移至组之间的空白列表?

时间:2018-06-21 13:31:06

标签: jquery html jquery-ui jquery-ui-sortable

我有多个可排序列表。它可以重新排列组重新排列组中的项目在组之间移动项目

但是它不能将项目从一个组移动到另一个空组。

enter image description here

在这里,我需要将任何项目从Group2移至Group1

这里是fiddle,我尝试了以下代码

$(function(){
 $('#groupsList').sortable();
  $('.itemsList').sortable({
    connectWith: ['.group','.itemsList']
  });
});

预先感谢

1 个答案:

答案 0 :(得分:2)

问题是因为super元素为空时没有高度。因此,不可能在其上触发与拖动相关的事件。

一种解决方案是在元素上设置const englishPerson = { speak() { return 'Hello'; } }; // Non-concise method utilizing `call` instead of `super` const multilinguist = { speak: function() { return `${Object.getPrototypeOf(this).speak.call(this)}, Hola!` } }; Object.setPrototypeOf(multilinguist, englishPerson); console.log(multilinguist.speak()); // -> "Hello, Hola!",以使元素始终占据DOM中的空间,即使它们为空。试试这个:

.itemsList

min-height
.itemsList {
  min-height: 10px;
}
$(function() {
  $('#groupsList').sortable();
  $('.itemsList').sortable({
    connectWith: ['.group', '.itemsList']
  });
});

请注意,在上面的示例中,我在li { background-color: #ffcb05; margin: 5px; padding: 5px; cursor: move; } div:not(.container) { background-color: #00274c; min-height: 30px; margin: 10px; padding: 10px; width: 200px; vertical-align: top; display: inline-block; } .group { min-height: 50px; } .itemsList { min-height: 10px; border: 1px dotted #bd9700; }周围加了一个边框,以更清楚地表明最小高度设置正确。