使用 Google Chrome 瀏覽器，我需要從選單中拖放一個專案，以便在 dragstart 事件觸發時選單會自動關閉/隱藏/折疊/消失/（或類似的東西）。這必須以釋放 DOM 空間的方式完成，因此在可能的情況下使用“可見性”和“不透明度”的方法并不適合這種情況。
相反，有必要執行 display:none 或將選單推離網頁（沒有滾動條）之類的操作。但是，我在嘗試完成此操作時遇到了困難，并且可以使用一些幫助（或者如果想到另一種方法可以完成相同的操作，請告訴我。我還嘗試了 z-index 方法但沒有成功。）：
方法 1 - 嘗試通過絕對定位隱藏拖動專案的父元素 https://jsfiddle.net/gratiafide/4m5r186v/
function dragstart_handler(ev) {
ev.dataTransfer.setData("text/plain", ev.target.id);
ev.currentTarget.parentElement.style.cssText = "position:absolute; right:-5000px;";
}
方法 2 - 嘗試通過設定 display:none https://jsfiddle.net/gratiafide/Luj7d089/隱藏拖動項的父項
function drag(event) {
event.dataTransfer.setData("Text", event.target.id);
document.getElementById('parent').style.display = 'none';
}
您將在這兩種方法中看到，只要將 CSS 規則應用于被拖動專案的父元素，被拖動專案就會在兩種情況下被丟棄。即使我已經隱藏或將父元素移到視線之外，我只想能夠繼續拖動元素。在此先感謝您的幫助！
uj5u.com熱心網友回復：
您似乎希望您的父母通過拖動您孩子的元素而消失。
子元素受父元素的 CSS 樣式屬性影響。如果通過“display”、“visibility”和“opacity”等css屬性擦除父元素，則子元素是無條件可見的。
隱藏使用“絕對”屬性（但不是z-index -1）也是一種方式，但是根據父元素的“溢位”屬性可能會出現不需要的滾動條，并且必須反向添加子元素位置并重新計算.
作為我的測驗的結果，dragend當被拖動元素的父元素被重繪時，Chrome中發生了一個事件。但是在 Firefox 中，您的兩個示例都有效。
無論如何，根據它在Chrome中的作業原理來解釋，就是將Child和Parent之間的關系分開，并將其用作兄弟。如下修改您的 HTML。
<div id='relative_div'>
<div id="parent"></div>
<p id="source" ondragstart="dragstart_handler(event);" draggable="true">Drag me to the Drop Zone below</p>
</div>
接下來更新您的 CSS，如下所示。#parent應作為填寫的背景#relative_div。
#relative_div {
position: relative;
overflow: hidden;
width: 200px;
height: 100px;
padding: 2em;
}
#parent {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: lightgrey;
}
#source {
position: relative;
cursor: grab;
color: blue;
border: 1px solid black;
}
現在，無論你是使用#parent'position' 將其推開，還是使用“display”、“opaicty”或“visibility”將其隱藏，#source拖動都不會停止。
uj5u.com熱心網友回復：
好的，我認為我的評論是錯誤的，您想洗掉頁面上由源元素占用的空間（而不是釋放記憶體）。
要實作這一點，請添加 document.body.removeChild(document.getElementById('parent'));到您的放置處理程式。我制作了一個 js fiddle 來演示（id=spacer洗掉了 div 并在其下方添加了一個額外的段落以顯示元素已洗掉）：
https://jsfiddle.net/dj825rbo/
（修訂后的評論澄清了原點元素應該在拖動開始時消失）
這很可怕，但很有效（很糟糕，因為在拖動文本時看不到文本）。它依賴于一個隱藏元素，在拖動程序中，原始內容存盤在該隱藏元素中。用“mouseup”監聽器替換“drop”事件監聽器，允許臨時的內容（隱藏元素被傳輸到釋放滑鼠點擊的目標）
https://jsfiddle.net/dj825rbo/1/
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/437216.html
標籤：javascript html css
下一篇：CSS溢位：如何顯示底部元素