interact.js拖动项目移动在顶部

Question

这是我第一次使用这个插件。

我想添加元素的堆叠，只要它被拖动。我使用z-index和相对位置。

onstart: function (event) { 

    //get max z-index on page 
     var maxZ = Math.max.apply(null, 
     $.map($('body > *'), function(e,n) { 
     if ($(e).css('position') != 'static') 
      return parseInt($(e).css('z-index')) || 1; 
     })); 

     event.target.style.background = 'red'; 
     event.target.style.zIndex = maxZ + 1; 
     event.target.style.position = 'relative'; 
    }, 

有没有更有效的方法来做到这一点？

original drag and drop demo

my edited drag and drop demo with stacking

Answer 1

您的解决方案工作得很好，如果元素不也用作dropzones。当拖放区重叠时，interact.js选择DOM中最深的元素，因此应该出现在其他拖放区上方。某些CSS属性会更改绘制顺序（例如，position,transform,z-index等）。如果重叠的下拉列表重新排列，与z-index订购，那么可能发生的放置目标看起来不正确。

如果您所定位的元素都是兄弟姐妹，都有着absolute或fixedposition（任意拖拽发生之前），然后追加一个元素，它的父应该把它在别人面前，而不使用z-index你写信检查应该工作正常。

onstart: function (event) { 
    var target = event.target; 

    // Bring element in front of its siblings 
    target.parentNode.appendChild(target); 

    ... 
}