當聽一個DOM元素移動爲

我正在試圖做的基本上是這樣的CSS相當於：當聽一個DOM元素移動爲

position: absolute; 
top: calc(100px * nth-child);

鑑於這不是有效的CSS（獲得的n爲第n個孩子的價值和乘以由另一個值），我不得不用JavaScript來做到這一點。我可以輕鬆地在頁面上加載一次。我想要做的是聽取元素何時移動或重新排序，以便重新計算其位置。

無論它是在其當前的父節點內還是在整個不同的父節點內移動，都需要工作。

任何人都知道如何做到這一點？或者，或者，有沒有辦法用純CSS來做到這一點我不知道？

來源

2015-08-08 Zacqary

'nth-child'是什麼？似乎有更好的方法來做你想做的事情。你想要構建什麼樣的佈局？ – mattsven

父元素的'nnth-child'。我實際上想要構建的是一種佈局，它根據它們在標記中出現的順序以一種複雜的方式「轉換」某些Web組件，但我簡化它只是爲了提出這個問題。 – Zacqary

只是有點回答我自己的問題。由於我已經計劃使用Web組件，因此我發現attachedCallback完全符合我的要求。

最後，我發現createdCallback和attachedCallback之間的實際用例差異。

比方說，你有：

<div> 
    <my-element id="a"></my-element> 
    <my-element id="b"></my-element> 
</div>

然後運行：

var a = document.getElementById("a"); 
a.parentNode.appendChild(a);

這將移動#a到最後，產生這樣的：

<div> 
    <my-element id="b"></my-element> 
    <my-element id="a"></my-element> 
</div>

最關鍵的是，當appendChild被調用（和，我假設，insertBefore，和所有th e移動節點的其他功能），my-element將首先觸發detachedCallback，然後觸發attachedCallback。因此，如果包括在attachedCallback，以確定其位置的代碼：

myElementPrototype.attachedCallback = function() { 
    var myPosition = [].slice.call(this.parentNode.children).indexOf(this); 
}

那麼它會被再次確定無論身在何處的元素被移動。這應該與React等虛擬DOM API兼容。

至於如何做到這一點沒有網頁組件，那麼我想答案是做任何document-register-element不會填寫attachedCallback和detachedCallback。快速瀏覽看起來像是MutationObservers的東西，相當複雜。

來源

2015-08-08 18:13:16 Zacqary

當聽一個DOM元素移動爲

回答

相關問題