Jump to content

vmars316

Members
  • Posts

    480
  • Joined

  • Last visited

Everything posted by vmars316

  1. 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
  2. Thanks dsonesuk ; Got rid of // . Still probs with " width, height, left, top " see: https://www.w3schools.com/code/tryit.asp?filename=G7BTTE3FA589 Thanks
  3. 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>
  4. 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
  5. 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
  6. 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
  7. 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 !
  8. 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>
  9. <!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
  10. 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
  11. Ok , I see what you mean , and I am reading up on indexes and arrays . Thanks
  12. 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
  13. I would like to delete this post and I'll start afresh . Thanks
  14. 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
  15. Thanks; Actually, the code should show multiple : <div class="container"><div class="item" contenteditable="true"> This is content.</div></div> <!-- class="container" -->
  16. 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>
  17. Great , but how can I capture that information ? 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>
  18. 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
  19. Ugh (embarrassed) ! But happy that I can use 'textrea' as I had hoped . Thanks again dsonesuk
  20. 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
  21. 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:49 And after the 'click icon to save' , there are no additional error messages .
  22. 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
  23. 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 .
×
×
  • Create New...