0

我有多个可排序的，它们可以相互重叠。Sortables 相互连接并允许将一个元素拖动到另一个元素。还有其他项目，可以拖到这些分类中。

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

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

4

1 回答 1

0

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

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

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 解决方案有任何疑问，请随时分享，因为我很好奇我们是否可以做得更好。

于 2013-04-26T09:12:26.300 回答