Question

我有多个可排序的，可以互相重叠。可排序相互连接，允许将元素拖到另一个元素。还有其他项目，可以拖入这些可排序的项目。

当占位符完全覆盖另一个占位符时，我有一个棘手的部分。这阻止了我将元素从外部容器中删除到内部容器。我已经扩展了可排序的小部件并进行了一些修改以检查z-index而不是包含。

if (innermostContainer && $.contains(this.containers[i].element[0],innermostContainer.element[0])){

更改为：

if (innermostContainer && parseInt(this.containers[i].element.css('zIndex')) < parseInt(innermostContainer.element.css('zIndex'))){

它适用于这个问题。

接下来的问题是，如果我将项目从可拖动项拖放到内部容器中，则会出现2个占位符，并尝试将它们都添加为错误。

（如果我之前的z-index修复没有应用，拖动的项目也会添加到内部容器以及另一个容器中）所以主要是我的修复将外部容器项放入内部容器中。

这两种效果对我都不好，但我想通过只添加一个占位符和一个项来解决这个问题。

你有什么解决方案我该怎么办？

我创建了一个示例来向您展示问题：http://jsbin.com/irigas/1/edit

Answer 1

所以我花了很多时间，但我能够找到一个解决方案，我将分享一个可能的解决方案。

我创建了一个虚拟排序，可以在拖动时获取不需要的项目。

var dummy = $('#dummy');
  dummy.testSortable({
   items: '.item', 
   helper: "clone",
   tolerance: "pointer",
   appendTo: 'body'
  });
  window.dummySortable = dummy.data('sortable'); //this data key depends on the actual jQuery ui version

我们还需要全局标记拖动开始和结束事件，因为我们需要稍后检查它：

start: function() {
    window.isdrag = true;

},
stop: function() {
    window.isdrag = false;
}

然后在之前扩展的方法中我们需要添加：

if (innermostContainer && parseInt(this.containers[i].element.css('zIndex')) < parseInt(innermostContainer.element.css('zIndex'))) {
    if(window.isdrag){
        innermostContainer = window.dummySortable;
        innermostIndex = this.containers.indexOf(innermostContainer);
    }
    continue;
}

这将过滤拖动上的任何不需要的元素，并将它们发送到虚拟排序中。您可以在后面看到绿色背景，即虚拟可排序。

使用解决方案测试修订版＃2：http://jsbin.com/irigas/2/

如果你对这个hacky解决方案有任何困难，请随意分享，因为我很好奇我们是否可以做得更好。

jQuery ui可重排和可拖动的重叠容器

1 个答案: