Jump to content

vmars316

Members
  • Content Count

    347
  • Joined

  • Last visited

Community Reputation

3 Neutral

About vmars316

  • Rank
    Member

Profile Information

  • Location
    Brownsville, Tx

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. 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
  2. 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
  3. 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
  4. 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 !
  5. 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>
  6. <!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
  7. 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
  8. Ok , I see what you mean , and I am reading up on indexes and arrays . Thanks
  9. 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
  10. I would like to delete this post and I'll start afresh . Thanks
  11. 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
  12. Thanks; Actually, the code should show multiple : <div class="container"><div class="item" contenteditable="true"> This is content.</div></div> <!-- class="container" -->
  13. 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>
  14. 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>
×
×
  • Create New...