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); 

    ... 
}