vmars316 5 Posted August 7, 2019 Report Share Posted August 7, 2019 (edited) Hello & Thanks for your Help : When <textarea> is enabled , it cancels drag element movement . <div id="mydiv"> <div id="mydivheader">Click here to move</div> <!-- <textarea rows="4" cols="10"> --> <p contenteditable="true">paragraph 2</p> </div> <!DOCTYPE html> <html> <style> #mydiv { position: absolute; z-index: 9; background-color: #f1f1f1; text-align: center; border: 1px solid #d3d3d3; } #mydivheader { padding: 10px; cursor: move; z-index: 10; background-color: #2196F3; color: #fff; } </style> <body> <h5>Draggable DIV Element</h5> <p>Click and hold the mouse button down while moving the DIV element</p> <div id="mydiv"> <div id="mydivheader">Click here to move</div> <!-- <textarea rows="4" cols="10"> --> <p contenteditable="true">paragraph 2</p> </div> <script> //Make the DIV element draggagle: dragElement(document.getElementById("mydiv")); function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementById(elmnt.id + "header")) { /* if present, the header is where you move the DIV from:*/ document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown; } else { /* otherwise, move the DIV from anywhere inside the DIV:*/ elmnt.onmousedown = dragMouseDown; } function dragMouseDown(e) { e = e || window.event; e.preventDefault(); // get the mouse cursor position at startup: pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement; // call a function whenever the cursor moves: document.onmousemove = elementDrag; } function elementDrag(e) { e = e || window.event; e.preventDefault(); // calculate the new cursor position: pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; // set the element's new position: elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; } function closeDragElement() { /* stop moving when mouse button is released:*/ document.onmouseup = null; document.onmousemove = null; } } </script> </body> </html> Can anyone show me how to fix it ? Thanks Edited August 7, 2019 by vmars316 Bad link Quote Link to post Share on other sites
dsonesuk 913 Posted August 7, 2019 Report Share Posted August 7, 2019 Textarea does not have a closing tag </textarea>. Quote Link to post Share on other sites
vmars316 5 Posted August 7, 2019 Author Report Share Posted August 7, 2019 Ugh (embarrassed) ! But happy that I can use 'textrea' as I had hoped . Thanks again dsonesuk Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.