div 内的可排序元素不能放在另一个 div 内有可排序元素的 HEADER 上

Question

首先，检查这个以了解我在说什么： https://jsfiddle.net/3s1s7nn3/10/

$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();

如果你从"LEFT red div"中取出"ITEM 1"并移动到"RIGHT red div"上，它不会掉落它，只有当你把"ITEM"放在里面时它才会起作用div.

的项目列表

我怎样才能允许我的 ITEMS 被丢弃在 div 中的任何地方，并且仍然将它们放在 itemlist 中？（我不希望它被放置在项目列表之外的其他地方，但我希望能够将它放在 div 中的任何位置，而不仅仅是在项目列表中）。

对不起，如果我不是很清楚.. 谢谢

Answer 1

您不能将它们放在 div 中，因为您正在将它与列表 connectedSortable 连接并且您不能将它们放在列表之外。

如果您想要从顶部添加一些 space 并且仍然能够将它们放入列表中，您应该使用 padding 而不是 margin.

Here 是一个工作示例。

Answer 2

只是想让你知道，我从零开始研究解决方案，我想通了！

SOLUTION :

sortable element inside a div can't be dropped on the HEADER of another div with sortable element INSIDE