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'; 
    },

有更有效的方法嗎？

原始的拖放演示

我編輯的帶有堆棧的拖放演示

Answer 1

如果元素也不能用作拖放區，則您的解決方案效果很好。 當放置區域重疊時，interact.js選擇DOM中最深的元素，因此應在其他放置區域上方顯示，某些CSS屬性會更改繪制順序（例如position ， transform ， z-index等）。使用z-index重新排序，則放置目標看起來可能不正確。

如果您要定位的元素都是兄弟姐妹並且都具有absolute或fixed position （在發生任何拖動操作之前），則將一個元素附加到其父元素應使其在其他元素之前而不使用z-index這樣放下檢查就可以了精細。

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

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

    ...
}