TAG
CSS
JavaScript
Result
Run
License
<div class="container"> <div> <h4 draggable="true">Drag me</h4> </div> <div>Please drag here.</div> <div></div> </div>
.container { width: 90%; display: flex; flex-direction: column; gap: 20px 0; } .container > div { background-color: #EAEAEA; min-height: 50px; } .container > div:first-child:active { cursor: move; } .container > .dragover { border: 1px solid #FF0000; }
window.addEventListener("load", () => { const elContainer = document.querySelector(".container"); let elDragged; elContainer.addEventListener("dragstart", e => { elDragged = e.target; }); elContainer.addEventListener("dragover", e => { e.preventDefault(); if(e.currentTarget.children.item(1) == e.target) { e.target.classList.add("dragover"); } }); elContainer.addEventListener("drop", e => { if(e.currentTarget.children.item(1) == e.target) { e.target.append(elDragged); e.target.classList.remove("dragover"); elDragged.textContent = "Move completed."; } }); elContainer.addEventListener("dragleave", e => { if(e.currentTarget.children.item(1) == e.target) { e.target.classList.remove("dragover"); } }); });
Console
expand_less
License
License
by DevDic
Close