vmars316
-
Posts
480 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by vmars316
-
-
Thanks dsonesuk ;
Got rid of // .
Still probs with " width, height, left, top " see:
https://www.w3schools.com/code/tryit.asp?filename=G7BTTE3FA589
Thanks
-
Hello & Thanks:
I can't seem to get "css border, margin, display" working .
Would like all 4 of the "myDiv" to show side by side .
Pls, what am I doing wrong ?
Thanks
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style> body { font-family: Comic Sans MS; background: #D3DDEB; // #bcce98 ; border-style: 12px solid navy; margin: 8px; } #container { border-style: 12px solid navy; } .mydiv { position: absolute; display: inline-block; left: 10px; z-index: 9; background-color: lightgrey; // #495C87; // #e9f2d7 ; text-align: center; border-style: solid ; border-width: 1px; border-color: #D9B04E ; } .mydivheader { padding: 10px; cursor: move; z-index: 10; background-color: #495C87; // darkgreen ; color: #fff; font-size: 12px; } textarea { background-color: #F1F1F1; // #D3DDEB; // #e9f2d7 ; color: black ; } #myPreDiv { position: absolute; top:350px; // display: inline-block; } .pasteInto{ // display: none; border: dotted ; } h5 { text-align: center: } #currentPage_Address { background: #495C87; // #839C4B ; // #808080 ; // #2196F3 ; // #4DABF5; // #B6DDFB ; // #BBD1E3 ; // #CCDCEA ; // #CBE6FC; // #BCCE98; font-size: 1px; color: #D9B04E ; // white ; // #FFFFF ; // #808693; } </style> </head> <body > <div id="currentPage_Address" style="text-align: center; ">myStory.html</div> <br> <button>Save This Page</button> <button>Copy into PRE</button> <button>Copy Back into textarea</button> <br><br> <div class="container" > <div class="mydiv" > <div class="mydivheader"></div> <textarea class="copyFrom" rows="4" cols="12"> </textarea> </div> <div class="mydiv" > <div class="mydivheader"></div> <textarea class="copyFrom" rows="4" cols="12"> </textarea> </div> <div class="mydiv" > <div class="mydivheader"></div> <textarea class="copyFrom" rows="4" cols="12"> </textarea> </div> <div class="mydiv" > <div class="mydivheader"></div> <textarea class="copyFrom" rows="4" cols="12"> </textarea> </div> </div> <!-- #container --> <div id="myPreDiv" > <pre contenteditable="true" class="pasteInto" >1</pre> <pre contenteditable="true" class="pasteInto" >2</pre> <pre contenteditable="true" class="pasteInto" >3</pre> <pre contenteditable="true" class="pasteInto" >4</pre> </div> </body> </html>
-
Thank you Funce !
I will study this until I understand every 'jot and tittle' .
You moved me to start a Folder for w3schools-Examples .
http://vmars.us/w3schools-Examples/Draggable-Div-Elements-w3Schools-FUNCE.html
Thanks again
- 1
-
OK Funce :
I have poor eysite , and a learning disability ,
so let me absorb this , it may take a while .
I have to see example first and work backwards ,
I realize it makes more work for you folks , and I apologize for that .
so yes , an explanation would tremendously useful :
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_draggable
Thanks
-
17 minutes ago, dsonesuk said:
You are passing the identity of the specific elements to process along with the function called to do the processing. The for loop curly braces start and finish after the first if conditioning and any code with [ i ] should be within those braces.
Plz , what question are you responding to ?
Thanks
-
Here's what have so far
BUT I am still getting an error:
" Uncaught TypeError: Cannot set property 'onmousedown' of undefined "
Pls, what am I doing wrong//Make the DIV element draggagle: //dragElement(document.getElementsByClassName("mydiv")); dragElement(document.querySelectorAll("p")); var elmnt ; var i; function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; for (i = 0; i < elmnt.length; i++) { if (this.elmnt) { break; } } elmnt[i] = document.getElementsByClassName("mydivheader"); { /* if present, the header is where you move the DIV from:*/ elmnt[i].onmousedown = dragMouseDown; // ERROR HERE } // else { // /* otherwise, move the DIV from anywhere inside the DIV:*/ // elmnt[i].onmousedown = dragMouseDown; // } }
Yes , dsonesuk and Funce :
I will do everything you say :
But AGAIN I ASK :
What is the purpose of these two statements :dragElement(document.getElementsByClassName("mydiv"));
dragElement(document.querySelectorAll("p"));AND what is that purpose called (It must have a name (Then I can study up on it .))?
AND what are these statements doing ?
HOW do they relate to " function dragElement(elmnt) {} "AND why is this method ok :
" dragElement(document.getElementById("mydiv")); "
but this is not , and how could I code it so it is useable ? :
" dragElement(document.getElementsByClassName("mydiv")); "
Thanks
-
23 hours ago, dsonesuk said:
document.getElementById() = singular
document.getElementsByClassName() = multiple.
I think I understand what you are saying :
"document.getElementsByClassName()" returns a nodeList . "
So I need to parse that list , but for
"document.getElementsByClassName()" returns a nodeList . "
(
I get error:
" Uncaught TypeError: elmnt.getElementsByClassName is not a function " .
)
Once I solve that , then I can proceed with this following question
about " function dragElement(elmnt) "
(
So if " elmnt " is that nodeList ,
What does it look like ?
Does it show two "mydiv" ?
If so then how do I determine which "mydiv" was clicked ?
)
//Make the DIV element draggagle: dragElement(document.getElementsByClassName("mydiv")); function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (elmnt.getElementsByClassName("mydivheader")[0]) { /* if present, the header is where you move the DIV from:*/ elmnt.getElementsByClassName("mydivheader")[mydiv].onmousedown = dragMouseDown; } else { /* otherwise, move the DIV from anywhere inside the DIV:*/ elmnt.onmousedown = dragMouseDown; } }
Thanks for sticking with me !
-
On 8/15/2019 at 9:00 PM, Funce said:
You haven't changed your headers from id= to class= in your HTML
Also, you'll need to loop through the collection provided by getElementsByClass by using a for loop, rather than directly putting it into dragElement
var mydivs = document.getElementsByClassName("mydiv"); for (var i = 0; i < mydivs.length; i++) { dragElement(mydivs[i]); }
Disclaimer: Untested
Thanks Funce
Sorry , I am confused where things should go:
<!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> <h1>Draggable DIV Element</h1> <p>Click and hold the mouse button down while moving the DIV element</p> <div class="mydiv"> <div class="mydivheader">Click here to move</div> <p>Move</p> <p>this</p> <p>DIV</p> </div> <div class="mydiv"> <div class="mydivheader">Click here to move</div> <p>Move</p> <p>this</p> <p>DIV</p> </div> <script> //Make the DIV element draggagle: var elmnt = 0; var mydiv; // dragElement(mydiv[elmnt]); function dragElement(elmnt) { dragElement(mydiv[elmnt]); //for (var elmnt = elmnt; elmnt < mydivs.length; elmnt++) { // dragElement(mydiv[elmnt]); // } var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementById(elmnt.ClassName + "header")) { /* if present, the header is where you move the DIV from:*/ document.getElementById(elmnt.class + "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>
-
<!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> <h1>Draggable DIV Element</h1> <p>Click and hold the mouse button down while moving the DIV element</p> <div class="mydiv"> <div class="mydivheader">Click here to move</div> <p>Move</p> <p>this</p> <p>DIV</p> </div> <div class="mydiv"> <div class="mydivheader">Click here to move</div> <p>Move</p> <p>this</p> <p>DIV</p> </div> <script> //Make the DIV element draggagle: dragElement(document.getElementByClassName("mydiv")); function dragElement(elmnt) { for (var elmnt = 0; elmnt < mydivs.length; elmnt++) { dragElement(mydiv[elmnt]); } var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementById(elmnt.class + "header")) { /* if present, the header is where you move the DIV from:*/ document.getElementById(elmnt.class + "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>
Thanks Funce
I must have something in the wrong place
'cause I am getting error:
Uncaught TypeError: document.getElementByClassName is not a function
<!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> <h1>Draggable DIV Element</h1> <p>Click and hold the mouse button down while moving the DIV element</p> <div class="mydiv"> <div class="mydivheader">Click here to move</div> <p>Move</p> <p>this</p> <p>DIV</p> </div> <div class="mydiv"> <div class="mydivheader">Click here to move</div> <p>Move</p> <p>this</p> <p>DIV</p> </div> <script> //Make the DIV element draggagle: dragElement(document.getElementByClassName("mydiv")); function dragElement(elmnt) { for (var elmnt = 0; elmnt < mydivs.length; elmnt++) { dragElement(mydiv[elmnt]); } var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementById(elmnt.class + "header")) { /* if present, the header is where you move the DIV from:*/ document.getElementById(elmnt.class + "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>
Thanks
-
Thanks Funce:
Is this what you mean ?
Code below .
<!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>HelpMeDoThis-Multi-Draggable-ID-Element-w3Schools-FUNCE.html</h5> <p>Click and hold the mouse button down while moving the DIV element</p> <div class="mydiv"> <div id="mydivheader">Click here to move</div> <textarea class="textArea" rows="4" cols="20"> </textarea> </div> <div class="mydiv"> <div id="mydivheader">Click here to move</div> <textarea class="textArea" rows="4" cols="20"> </textarea> </div> <script> //Make the DIV element draggagle: dragElement(document.getElementByClassName("mydiv")); function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (elmnt.getElementsByClassName("mydivheader")[0]) { /* if present, the header is where you move the DIV from:*/ elmnt.getElementsByClassName("mydivheader")[0].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>
'mydivheader' has lost its color
and won't drag anymore .
Thanks
-
On 8/8/2019 at 1:38 AM, dsonesuk said:
But you will always clone the id as well, you can either do as i suggested in that you use a counter to apply a custom data- index and then read that value when selected, OR use counter to apply unique value for id refence at end when cloned so "mydiv" is changed to for example "mydiv2" for newly cloned element, then "mydiv3" for next and so on...
Ok , I see what you mean , and I am reading up on indexes and arrays .
Thanks
-
Hello & Thanks ,
I would like to take w3schools code:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_draggable
And replace the
<p>Move</p> <p>this</p> <p>DIV</p>
with multiple "textareas" :
<textarea class="textArea" rows="4" cols="20"> </textarea>
As I do here:
https://www.w3schools.com/code/tryit.asp?filename=G6WWH7C8BR89
(Please note the behavior of <trextarea> , how you can Drag the textarea
from the right bottom corner
and resize the whole 'mydiv' . )
And then then I want to add multiple "mydiv" structures:
<div id="mydiv"> <div id="mydivheader">Click here to move</div> <textarea class="textArea" rows="4" cols="20"> </textarea> </div>
So that I can drag them around .
Please show me how to modify the code to make it do this .
Thank you very much !
Also ,
dragElement(document.getElementById("mydiv"));
what exactly is being put into dragElement ?
A reference to "mydiv" or "mydivheader" ?
How does dragElement know to only Drag "mydivheader"
and not <textarea> .
_______________________
I like this code very much , but it doesn't work with the < textarea> structure .
https://www.w3schools.com/code/tryit.asp?filename=G6WXCFPNLL4E
-
I would like to delete this post
and I'll start afresh .
Thanks
-
Sorry the editor is deleting my stuff .
I'll start again :
Thanks; Actually, the code should show multiple : <div class="container"> <div class="item" contenteditable="true"> This is content. </div> </div> <!-- class="container" --> Ingolme: It means that document.querySelector("container"); is not returning an element. You forgot to use a class selector "." to select the element by its class attribute. vm: I don't understand; isn't ("container") the class ? Ingolme: For the second error, document.getElementsByClassName("container"); returns a collection of elements, not a single element. You have to select one of the elements in that collection. vm: Do you mean this sort of thing ?: var x = document.querySelectorAll(".mydiv"); var i; for (i = 0; i < x.length; i++) { ........... ; } Where would I put this code?: After this statement?: function dragStart(e){ Thanks
-
Thanks;
Actually, the code should show multiple :
<div class="container"><div class="item" contenteditable="true"> This is content.</div></div> <!-- class="container" -->
-
Hello & Thanks :
I am getting 2 Uncaught errors (see code below):
Here: container.addEventListener("touchstart", dragStart, false);
And here: var clone = elmnt.cloneNode(true);
Uncaught Drag-ContainerClass-CloneNode-Forum.html:73 TypeError: Cannot read property 'addEventListener' of null
at Drag-ContainerClass-CloneNode-Forum.html:73
2 Uncaught Drag-ContainerClass-CloneNode-Forum.html:62 TypeError: elmnt.cloneNode is not a function
at cloneByClassName (Drag-ContainerClass-CloneNode-Forum.html:62)
at HTMLButtonElement.onclick (Drag-ContainerClass-CloneNode-Forum.html:57)Plz, what am I doing wrong ?
Thanks<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <title>Drag-ContainerClass-CloneNode-Forum.html</title> <style> body { margin: 20px; } .container { width: 400px; height: 400px; background-color: #DAE9BC; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 7px; touch-action: none; } .item { border-style: solid; border-width: 6px; touch-action: none; user-select: none; position: relative; width: 100px; height: 100px; background-color: #F3F8EA; border-color: #006400; top: 0px; left: 0px; } .item:active { opacity: .75; } .item:hover { cursor: pointer; } h1 { margin-bottom: 10px; } </style> </head> <body> <h5>Drag-ContainerClass-CloneNode-Forum.html</h5> <div class="container"> <div class="item" contenteditable="true"> This is content. </div> </div> <!-- class="container" --> <br> <button onclick="cloneByClassName()">cloneByClassName</button> <br> <script> function cloneByClassName() { var elmnt = document.getElementsByClassName("container"); var clone = elmnt.cloneNode(true); document.body.appendChild(clone); } </script> <script> var container = document.querySelector("container"); var activeItem = null; var active = false; container.addEventListener("touchstart", dragStart, false); container.addEventListener("touchend", dragEnd, false); container.addEventListener("touchmove", drag, false); container.addEventListener("mousedown", dragStart, false); container.addEventListener("mouseup", dragEnd, false); container.addEventListener("mousemove", drag, false); function dragStart(e) { if (e.target !== e.currentTarget) { active = true; // this is the item we are interacting with activeItem = e.target; if (activeItem !== null) { if (!activeItem.xOffset) { activeItem.xOffset = 0; } if (!activeItem.yOffset) { activeItem.yOffset = 0; } if (e.type === "touchstart") { activeItem.initialX = e.touches[0].clientX - activeItem.xOffset; activeItem.initialY = e.touches[0].clientY - activeItem.yOffset; } else { console.log("doing something!"); activeItem.initialX = e.clientX - activeItem.xOffset; activeItem.initialY = e.clientY - activeItem.yOffset; } } } } function dragEnd(e) { if (activeItem !== null) { activeItem.initialX = activeItem.currentX; activeItem.initialY = activeItem.currentY; } active = false; activeItem = null; } function drag(e) { if (active) { if (e.type === "touchmove") { e.preventDefault(); activeItem.currentX = e.touches[0].clientX - activeItem.initialX; activeItem.currentY = e.touches[0].clientY - activeItem.initialY; } else { activeItem.currentX = e.clientX - activeItem.initialX; activeItem.currentY = e.clientY - activeItem.initialY; } activeItem.xOffset = activeItem.currentX; activeItem.yOffset = activeItem.currentY; setTranslate(activeItem.currentX, activeItem.currentY, activeItem); } } function setTranslate(xPos, yPos, el) { el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)"; } </script> </body> </html>
-
3 hours ago, dsonesuk said:
Each one you clone you can apply a unique custom data-index ref before you append
Great , but how can I capture that information ?
3 hours ago, dsonesuk said:and you do know all attributes are copied which means you'll have multiple identical id references which should be unique.
I was hoping to avoid problems by setting a dual definition of 'id=' and 'class=' :
.myDivClass { position: absolute; z-index: 9; background-color: #f1f1f1; text-align: center; border: 1px solid #d3d3d3; } .myDivHdrClass { padding: 10px; cursor: move; z-index: 10; background-color: #2196F3; color: #fff; } <div id="mydiv" class="myDivClass"> <div id="mydivHdr" class="myDivHdrClass">Click here to move</div>
-
Hello & Thanks :
In code below , how do I tell " dragElement(document.getElementByClassName("myDivClass")); "
which clone was clicked on ?
<!DOCTYPE html> <html> <style> #mydiv { position: absolute; z-index: 9; background-color: #f1f1f1; text-align: center; border: 1px solid #d3d3d3; } .myDivClass { position: absolute; z-index: 9; background-color: #f1f1f1; text-align: center; border: 1px solid #d3d3d3; } #mydivHdr { padding: 10px; cursor: move; z-index: 10; background-color: #2196F3; color: #fff; } .myDivHdrClass { padding: 10px; cursor: move; z-index: 10; background-color: #2196F3; color: #fff; } </style> <body> <h1>Draggable DIV Element</h1> <p>Click and hold the mouse button down while moving the DIV element</p> <div id="mydiv" class="myDivClass"> <div id="mydivHdr" class="myDivHdrClass">Click here to move</div> <div contenteditable="true">Type here: </div> </div> <p>Click the button to copy the myDivClass element above, <br>including all its attributes and child elements, and append it to the document.</p> <button onclick="cloneFunction()">Try it</button> <script> function cloneFunction() { var elmnt = document.getElementsByClassName("myDivClass")[0]; var cln = elmnt.cloneNode(true); document.body.appendChild(cln); } </script> <script> //Make the DIV element draggagle: dragElement(document.getElementByClassName("myDivClass")); function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementById(elmnt.id + "Hdr")) { /* if present, the header is where you move the DIV from:*/ document.getElementById(elmnt.id + "Hdr").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>
Thanks
-
-
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
-
Yep , addBlocker was the prob
Thanks
-
WIndows 10 , Chrome
None of the try-it links work for me , here's one:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_hover2
DeveloperTools show these errors:
snigelweb-com.videop…om/videoloader.js:1 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
sncmp_stub.min.js:1 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
static.h-bid.com/w3s…m.min.js?20190327:1 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
tryit.asp:49 Uncaught TypeError: window.__cmp is not a function
at tryit.asp?filename=trycss_sel_hover2:49And after the 'click icon to save' , there are no additional error messages .
-
Editor wouldn't let me add my code:
So here it is now:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <title>Drag Multiple Elements</title> <style> body { margin: 20px; } #container { width: 100%; height: 200px; background-color: #DAE9BC; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 7px; touch-action: none; } .item:active { opacity: .75; } .item:hover { cursor: pointer; } .item { border-style: solid; border-width: 1px; touch-action: none; user-select: none; position: absolute; } .item4 { width: 100px; height: 100px; background-color: #F3F8EA; border-color: #006400; top: 100px; left: 35px; } p.borderShowTop{ background-color: yellow; padding: 20px; display: none; } div .item4:hover + p.borderShowTop { background-color: yellow; padding: 20px; display: block; } </style> </head> <body style="text-align: center;"> <h5>Drag Multiple Elements</h5> <div id="outerContainer"> <div id="container"> <div class="item item4" contenteditable="true"> Hover over me! Contenteditable. <p class="borderShowTop">Click & hold down to move :)</p> </div> <!-- class="item item4" --> </div> <!-- id="container" --> </div> <!-- id="outerContainer" --> </body> </html>
Thanks
-
Thanks dsonesuk
works perfectly !
Now what I want to do is add a few more things to be more in line with I am aiming at . But I am running into a similar thing .
The two areas that I suspect are problematic are :
div .item4:hover + p.borderShowTop { background-color: yellow; padding: 20px; display: block; } <!-- and --> <div class="item item4" contenteditable="true"> Hover over me! Contenteditable. <p class="borderShowTop">Click & hold down to move :)</p>
I can't see my error .
? Need help with css border, margin, display
in HTML/XHTML
Posted
Thanks ,
Oops! Forgot that one
The prob that remains is:
why does css borders for "myDiv" work fine
but the borders for body and div .container do not work ?
Thanks
https://www.w3schools.com/code/tryit.asp?filename=G7CDQO1VLUTQ
Thanks