Jump to content

vmars316

Members
  • Posts

    480
  • Joined

  • Last visited

Posts posted by vmars316

  1. 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>
    	

  2. 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

  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. 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 !

  5. 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>
    	

     

     

     

  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. 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

  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. 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
    

     

  11. 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>

     

  12. 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>
    	

     

  13. 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

  14. 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

  15. 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 .

     

  16. 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

  17. 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...