我有多个可排序列表。它可以重新排列组, 重新排列组中的项目,在组之间移动项目。
但是它不能将项目从一个组移动到另一个空组。
在这里,我需要将任何项目从Group2移至Group1
这里是fiddle,我尝试了以下代码
$(function(){
$('#groupsList').sortable();
$('.itemsList').sortable({
connectWith: ['.group','.itemsList']
});
});
预先感谢
答案 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;
}
周围加了一个边框,以更清楚地表明最小高度设置正确。