使用javascript拖動多個div

Question

我有興趣通過單擊標題來拖動一些 div。 我遵循了 W3SCHOOL https://www.w3schools.com/howto/howto_js_draggable.asp 的說明以及在網絡上建立的一些建議。 這是我的實際代碼：

 var draggableElements = document.getElementsByClassName("one"); for(var i = 0; i < draggableElements.length; i++){ dragElement(draggableElements[i]); } function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementsByClassName("oneheader")) { document.getElementsByClassName("oneheader").onmousedown = dragMouseDown; } else { elmnt.onmousedown = dragMouseDown; } function dragMouseDown(e) { e = e || window.event; pos3 = parseInt(e.clientX); pos4 = parseInt(e.clientY); document.onmouseup = closeDragElement; document.onmousemove = elementDrag; return false; } function elementDrag(e) { e = e || window.event; pos1 = pos3 - parseInt(e.clientX); pos2 = pos4 - parseInt(e.clientY); pos3 = parseInt(e.clientX); pos4 = parseInt(e.clientY); elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; } function closeDragElement() { document.onmouseup = null; document.onmousemove = null; } }

 .one { width:51vw; height:60vh; position: absolute; top:20%; left:20%; z-index: 9998; background-color: #e0dace; background-image: url('https://www.transparenttextures.com/patterns/fresh-snow.png'); text-align: center; border: 1px solid #e0dac9; overflow:hidden; } .oneheader { padding: 5px; cursor: move; z-index: 9999; background-color:rgba(145,143,135,1); color: #fff; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="first" class="one"> <div id="oneheader1" class="oneheader">first </div> </div> <div id="second" class="one"> <div id="oneheader2" class="oneheader">second </div> </div>

我創建了一個適用於整個 div 的Jsfiddle 。 我想要這個結果，但只點擊標題。

Answer 1

您可以使用 oneheader 類來應用您的 dragElement 函數並使用父節點進行定位。

    elmnt.parentNode.style.top = (elmnt.parentNode.offsetTop - pos2) + "px";
    elmnt.parentNode.style.left = (elmnt.parentNode.offsetLeft - pos1) + "px";

https://jsfiddle.net/q3Lnykao/