? Trouble with: passing dragElement(e.target.id);

Joined
May 21, 2012
Messages
44
Reaction score
0
Hello
Here:
https://vmars.us/Guitar/Which-Button-was-CLICKED-getElementById.html
I am trying to Drag-in-Drop two images , but they 'Don't Drag' .
Code runs 'buttonPressed' First , then attemps to run 'function dragElement' .
In the code below , there seems to be 'Two Trouble Spots' ,
line 114 and line 52 .
Can someone Please tell me what I am doing Wrong .
Thanks for your Help...

Code:
<!DOCTYPE html>
<html>
<head>
<style>
img {
    margin: 5px;
    padding: 5px 8px;
    outline: none;
//    background: #32bacf;
    border: none;
    color: white;
//    border-radius: 5px;
    font-size: 1em;
}

img:hover {
//    background-color: #ffa000;
    cursor: pointer;
}

#result {
  border:1px solid;
  display:inline-block;
  margin:5px;
/*   padding:5px; */
}
</style>
</head>
<body>
<div id="image-group">

<img id="Red-Circle" draggable="true"
src="https://vmars.us/Guitar/1-Red-Circle-Transp-32x32.png" width="32px" height="32px">

<img id="flatAccidental" draggable="true"
src="https://vmars.us/Guitar/flatAccidental-Grey-28x28.png" width="28px" height="28px">

<img id="naturalAccidental-Grey-28x28" draggable="true"
 src="https://vmars.us/Guitar/naturalAccidental-Grey-28x28.png" width="28px" height="28px">

<img id="sharpAccidental-Grey-28x28" draggable="true"
src="https://vmars.us/Guitar/sharpAccidental-Grey-28x28.png" width="28px" height="28px">
</div>

<div id="result"></div>
<script>

var elmnt ;
var timesIn = 0 ;
//document.addEventListener("mousedown", dragElement);

function dragElement(holdTargetId) {                                                //  line 52
  if (timesIn < 1 ) {return}
  timesIn = timesIn + 1 ;

console.log("function dragElement(elmnt"  + holdTargetId) ;
//  var savedTargetId = event.target.id ;
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  console.log("console.log says  = " + holdTargetId);

   elmnt.onmousedown = dragMouseDown; 
}

  function dragMouseDown(e) {
    console.log("function dragMouseDown(e)") ;
    e = e || window.event;
    e.preventDefault();
    
    console.log("function dragMouseDown(e)") ;
    // 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();
    console.log("function elementDrag(e)") ;

    // 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:*/
    console.log("function closeDragElement()")
    document.onmouseup = null;
    document.onmousemove = null;
  }

</script>

<script>
var holdTargetId = "" ;
//var ee ;
var thruCount = 1;
const buttons = document.getElementsByTagName("img");
const result = document.getElementById("result");

const buttonPressed = e => {
let  ee = e ;
  result.innerHTML = e.target.id;
  holdTargetId = e.target.id;
console.log("You clicked this image = " + holdTargetId ) ;
dragElement(holdTargetId);                                                 // line  114
}

for (let button of buttons) {
  console.log( "Iimage = " + thruCount);
  button.addEventListener("click", buttonPressed);
  thruCount = thruCount + 1;
}
</script>

</body>
</html>
 
Joined
Jan 30, 2023
Messages
107
Reaction score
13
The issue is with the event handling. You are trying to attach the mousedown event to an element, but the element is not defined. In your code, the element is defined inside the dragElement function, which means you need to call the dragElement function before the mousedown event is attached.

You need to change the following:

  1. Add the onmousedown event to each of the img elements:
Python:
<img id="Red-Circle" onmousedown="dragElement(this);" draggable="true" src="https://vmars.us/Guitar/1-Red-Circle-Transp-32x32.png" width="32px" height="32px">

  1. In the dragElement function, add elmnt = holdTargetId:
JavaScript:
function dragElement(holdTargetId) {
  if (timesIn < 1 ) {return}
  timesIn = timesIn + 1 ;
  elmnt = holdTargetId;
  ...
 
Joined
May 21, 2012
Messages
44
Reaction score
0
Hi Kuncode , Thanks for your Reply...
I made your change: elmnt = holdTargetId ;
What I am trying to do is Modify this W3School's code
so that I can DragDrop Multiple Divs
Rather than just DnD 1 Div .
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_draggable
My code has changed a bit from above code ,
now using DIVs instead Images .
JavaScript:
<!DOCTYPE html>
<!-- saved from url=(0085)file:///C:/2023-Drag-Drop-AnyWhere/TRY-THIS/Which-DIV-was-CLICKED-getElementById.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>
img {
    margin: 5px;
    padding: 5px 8px;
    outline: none;
    border: none;
    color: white;
    font-size: 1em;
}

div:hover {
//    background-color: #ffa000;
    cursor: pointer;
}

#result {
  border:1px solid;
  display:inline-block;
  margin:5px;
/*   padding:5px; */
}
</style>
</head>
<body>

<div id="elemContainer" style="position: absolute;  width: 1420px; height: 750px;  display:inline-block; ">

  <div class="item" id="elem1" draggable="true" style="border-radius: 50%; width:32px; height:32px; position: relative; float:left; left: 30%; top:0; background-color: #FF0004;">&nbsp;1</div>
 
 <div class="item" id="elem2" draggable="true" style="border-radius: 50%; width:32px; height:32px; position: relative; float:left; left: 31%;  top: 0; background-color: #FE8E05;">&nbsp;2</div>
 
 </div>  <!--   id="elemContainer"  -->

<div id="result">result = </div>

<script>
var holdTargetId = "" ;
var thruCount = 1;

const elemContainer = document.getElementsByTagName("div");
const result = document.getElementById("result");

const buttonPressed = e => {
  result.innerHTML = e.target.id;
  holdTargetId = e.target.id;
console.log("You clicked this div = " + holdTargetId ) ;
  dragElement(holdTargetId) ;
}

for (let div of elemContainer) {
  console.log( "thruCount = " + thruCount);
  div.addEventListener("click", buttonPressed);
  thruCount = thruCount + 1;
}
</script>

<script>
var elmnt ;
var timesIn = 0 ;
//document.addEventListener("mousedown", dragElement);

function dragElement(holdTargetId) {
console.log("dragElement(holdTargetId)") ;
//  if (timesIn < 1 ) {return}
//  timesIn = timesIn + 1 ;
  elmnt = holdTargetId ;

console.log("function dragElement(elmnt"  + holdTargetId) ;
//  var savedTargetId = event.target.id ;
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  console.log("console.log says  = " + holdTargetId);

   elmnt.onmousedown = dragMouseDown; 
}

  function dragMouseDown(e) {
console.log("function dragMouseDown(e)") ;
    e = e || window.event;
    e.preventDefault();
    
    console.log("function dragMouseDown(e)") ;
    // 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();
console.log("function elementDrag(e)") ;

    // 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:*/
console.log("function closeDragElement()")
    document.onmouseup = null;
    document.onmousemove = null;
  }
</script>
</body></html>

The 1st script figures out which DIV was Clicked-on .
The 2nd script then Drags and Drops the Clicked-on DIV .


I am trying to get from 1st script
to function dragElement(holdTargetId) in 2nd script .

Thanks for your Help...
 
Joined
Jan 30, 2023
Messages
107
Reaction score
13
Hi Kuncode , Thanks for your Reply...
I made your change: elmnt = holdTargetId ;
What I am trying to do is Modify this W3School's code
so that I can DragDrop Multiple Divs
Rather than just DnD 1 Div .
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_draggable
My code has changed a bit from above code ,
now using DIVs instead Images .
JavaScript:
<!DOCTYPE html>
<!-- saved from url=(0085)file:///C:/2023-Drag-Drop-AnyWhere/TRY-THIS/Which-DIV-was-CLICKED-getElementById.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>
img {
    margin: 5px;
    padding: 5px 8px;
    outline: none;
    border: none;
    color: white;
    font-size: 1em;
}

div:hover {
//    background-color: #ffa000;
    cursor: pointer;
}

#result {
  border:1px solid;
  display:inline-block;
  margin:5px;
/*   padding:5px; */
}
</style>
</head>
<body>

<div id="elemContainer" style="position: absolute;  width: 1420px; height: 750px;  display:inline-block; ">

  <div class="item" id="elem1" draggable="true" style="border-radius: 50%; width:32px; height:32px; position: relative; float:left; left: 30%; top:0; background-color: #FF0004;">&nbsp;1</div>
 
 <div class="item" id="elem2" draggable="true" style="border-radius: 50%; width:32px; height:32px; position: relative; float:left; left: 31%;  top: 0; background-color: #FE8E05;">&nbsp;2</div>
 
 </div>  <!--   id="elemContainer"  -->

<div id="result">result = </div>

<script>
var holdTargetId = "" ;
var thruCount = 1;

const elemContainer = document.getElementsByTagName("div");
const result = document.getElementById("result");

const buttonPressed = e => {
  result.innerHTML = e.target.id;
  holdTargetId = e.target.id;
console.log("You clicked this div = " + holdTargetId ) ;
  dragElement(holdTargetId) ;
}

for (let div of elemContainer) {
  console.log( "thruCount = " + thruCount);
  div.addEventListener("click", buttonPressed);
  thruCount = thruCount + 1;
}
</script>

<script>
var elmnt ;
var timesIn = 0 ;
//document.addEventListener("mousedown", dragElement);

function dragElement(holdTargetId) {
console.log("dragElement(holdTargetId)") ;
//  if (timesIn < 1 ) {return}
//  timesIn = timesIn + 1 ;
  elmnt = holdTargetId ;

console.log("function dragElement(elmnt"  + holdTargetId) ;
//  var savedTargetId = event.target.id ;
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  console.log("console.log says  = " + holdTargetId);

   elmnt.onmousedown = dragMouseDown;
}

  function dragMouseDown(e) {
console.log("function dragMouseDown(e)") ;
    e = e || window.event;
    e.preventDefault();
   
    console.log("function dragMouseDown(e)") ;
    // 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();
console.log("function elementDrag(e)") ;

    // 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:*/
console.log("function closeDragElement()")
    document.onmouseup = null;
    document.onmousemove = null;
  }
</script>
</body></html>

The 1st script figures out which DIV was Clicked-on .
The 2nd script then Drags and Drops the Clicked-on DIV .


I am trying to get from 1st script
to function dragElement(holdTargetId) in 2nd script .

Thanks for your Help...
To allow multiple divs to be draggable, you need to add an event listener to each of the divs to allow them to be individually clicked, then dragged. In the JavaScript code, you can loop through the elemContainer array of div elements, and add an event listener to each div using the addEventListener() method. This method takes two arguments: the type of event to listen for (in this case, "click") and a callback function to run when the event is triggered. This function sets the holdTargetId variable to the id of the clicked div, then calls the dragElement() function with the holdTargetId as its argument. This allows the dragElement() function to work with the correct div.

JavaScript:
const elemContainer = document.getElementsByTagName("div");

const buttonPressed = e => {
  holdTargetId = e.target.id;
  dragElement(holdTargetId);
};

for (let div of elemContainer) {
  div.addEventListener("click", buttonPressed);
}
 
Joined
May 21, 2012
Messages
44
Reaction score
0
To allow multiple divs to be draggable, you need to add an event listener to each of the divs to allow them to be individually clicked, then dragged. In the JavaScript code, you can loop through the elemContainer array of div elements, and add an event listener to each div using the addEventListener() method. This method takes two arguments: the type of event to listen for (in this case, "click") and a callback function to run when the event is triggered. This function sets the holdTargetId variable to the id of the clicked div, then calls the dragElement() function with the holdTargetId as its argument. This allows the dragElement() function to work with the correct div.

JavaScript:
const elemContainer = document.getElementsByTagName("div");

const buttonPressed = e => {
  holdTargetId = e.target.id;
  dragElement(holdTargetId);
};

for (let div of elemContainer) {
  div.addEventListener("click", buttonPressed);
}
Thanks ,
Your Code , isn't that Exactly what I Coded above ?
I don't see any difference . ?
I put the Code here so you can c'k the Console.log , no ERROR ,
or Here:
Which-DIV-was-CLICKED-KUNCODE.html:54 thruCount = 1
Which-DIV-was-CLICKED-KUNCODE.html:54 thruCount = 2
Which-DIV-was-CLICKED-KUNCODE.html:54 thruCount = 3
Which-DIV-was-CLICKED-KUNCODE.html:54 thruCount = 4

Which-DIV-was-CLICKED-KUNCODE.html:49 You clicked this div = elem1
Which-DIV-was-CLICKED-KUNCODE.html:66 function dragElement(elmnt = elem1
Which-DIV-was-CLICKED-KUNCODE.html:73 console.log says = elem1

Which-DIV-was-CLICKED-KUNCODE.html:49 You clicked this div = elem1
Which-DIV-was-CLICKED-KUNCODE.html:66 function dragElement(elmnt = elem1
Which-DIV-was-CLICKED-KUNCODE.html:73 console.log says = elem1

It never gets to:
function dragMouseDown(e)
function elementDrag(e)
function closeDragElement()



Why does it loop thru 'function dragElement(elmnt' = elem1 , 2 times ?
Shouldn't it do a removeEventListener somewhere ?

Thanks for your Help...
 
Joined
Jan 30, 2023
Messages
107
Reaction score
13
Thanks ,
Your Code , isn't that Exactly what I Coded above ?
I don't see any difference . ?
I put the Code here so you can c'k the Console.log , no ERROR ,
or Here:
Which-DIV-was-CLICKED-KUNCODE.html:54 thruCount = 1
Which-DIV-was-CLICKED-KUNCODE.html:54 thruCount = 2
Which-DIV-was-CLICKED-KUNCODE.html:54 thruCount = 3
Which-DIV-was-CLICKED-KUNCODE.html:54 thruCount = 4

Which-DIV-was-CLICKED-KUNCODE.html:49 You clicked this div = elem1
Which-DIV-was-CLICKED-KUNCODE.html:66 function dragElement(elmnt = elem1
Which-DIV-was-CLICKED-KUNCODE.html:73 console.log says = elem1

Which-DIV-was-CLICKED-KUNCODE.html:49 You clicked this div = elem1
Which-DIV-was-CLICKED-KUNCODE.html:66 function dragElement(elmnt = elem1
Which-DIV-was-CLICKED-KUNCODE.html:73 console.log says = elem1

It never gets to:
function dragMouseDown(e)
function elementDrag(e)
function closeDragElement()



Why does it loop thru 'function dragElement(elmnt' = elem1 , 2 times ?
Shouldn't it do a removeEventListener somewhere ?

Thanks for your Help...
Code:
const items = document.getElementsByClassName("item");
const result = document.getElementById("result");

const buttonPressed = e => {
  result.innerHTML = e.target.id;
  dragElement(e.target.id);
};

for (let item of items) {
  item.addEventListener("click", buttonPressed);
}

function dragElement(id) {
  const elmnt = document.getElementById(id);
  let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;

  elmnt.onmousedown = dragMouseDown;

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

Based on the code snippets, it seems that the function "dragElement" is being called multiple times and is assigned the value of "elem1" every time it is called. The reason for this behavior is not clear from the code snippets provided. It is possible that there is a missing piece of code or some code that calls the function "dragElement" multiple times.

Regarding the missing functions, it is also not clear why they are not being called. Without additional information, it is not possible to determine why these functions are not being executed.
 
Joined
May 21, 2012
Messages
44
Reaction score
0
Thanks ,
here is the full code:

Code:
<!DOCTYPE html>
<!-- saved from url=(0085)file:///C:/2023-Drag-Drop-AnyWhere/TRY-THIS/Which-DIV-was-CLICKED-getElementById.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>
img {
    margin: 5px;
    padding: 5px 8px;
    outline: none;
    border: none;
    color: white;
    font-size: 1em;
}

div:hover {
//    background-color: #ffa000;
    cursor: pointer;
}

#result {
  border:1px solid;
  display:inline-block;
  margin:5px;
/*   padding:5px; */
}
</style>
</head>
<body>

<div id="elemContainer" style="position: absolute;  width: 1420px; height: 750px;  display:inline-block; ">

  <div class="item" id="elem1" draggable="true" style="border-radius: 50%; width:32px; height:32px; position: relative; float:left; left: 30%; top:0; background-color: #FF0004;">&nbsp;1</div>
 
 <div class="item" id="elem2" draggable="true" style="border-radius: 50%; width:32px; height:32px; position: relative; float:left; left: 31%;  top: 0; background-color: #FE8E05;">&nbsp;2</div>
 
 </div>  <!--   id="elemContainer"  -->

<div id="result">result = </div>

<script>
var holdTargetId = "" ;
var thruCount = 1;

const elemContainer = document.getElementsByTagName("div");
const result = document.getElementById("result");

const buttonPressed = e => {
  result.innerHTML = e.target.id;
  holdTargetId = e.target.id;
console.log("You clicked this div = " + holdTargetId ) ;
  dragElement(holdTargetId) ;
}

for (let div of elemContainer) {
  console.log( "thruCount = " + thruCount);
  div.addEventListener("click", buttonPressed);
  thruCount = thruCount + 1;
}
</script>

<script>
var elmnt ;
var timesIn = 0 ;
//document.addEventListener("mousedown", dragElement);

function dragElement(holdTargetId) {
console.log("function dragElement(elmnt = "  + holdTargetId) ;
//  if (timesIn < 1 ) {return}
//  timesIn = timesIn + 1 ;
  elmnt = holdTargetId ;

//  var savedTargetId = event.target.id ;
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  console.log("console.log says  = " + holdTargetId);

   elmnt.onmousedown = dragMouseDown; 
}

  function dragMouseDown(e) {
console.log("function dragMouseDown(e)") ;
    e = e || window.event;
    e.preventDefault();
    
    console.log("function dragMouseDown(e)") ;
    // 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();
console.log("function elementDrag(e)") ;

    // 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:*/
console.log("function closeDragElement()")
    document.onmouseup = null;
    document.onmousemove = null;
  }

</script>

</body></html>

And can see it run here:

https://vmars.us/Guitar/Which-DIV-was-CLICKED-KUNCODE.html
Thanks for your Help...
 
Joined
May 21, 2012
Messages
44
Reaction score
0
Hello ,
I changed from 'Get ID of Clicked Element Using For Loop'
to 'Get ID Of Clicked Element Using Parent Element'
and now no Problems for getting ID .

And Running 'function dragElement' is fine ,
but 'function dragMouseDown' never Runs .

How can I make 'function dragMouseDown' and
other Functions run ?
Thanks...
https://vmars.us/Guitar/Which-DIV-was-CLICKED-BY-PARENT.html

Code:
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>
img {
    margin: 5px;
    padding: 5px 8px;
    outline: none;
    border: none;
    color: white;
    font-size: 1em;
}

div:hover {
//    background-color: #ffa000;
    cursor: pointer;
}

#result {
  border:1px solid;
  display:inline-block;
  margin:5px;
/*   padding:5px; */
}
</style>
</head>
<body>

<div id="elemContainer" style="position: absolute;  width: 1420px; height: 750px;  display:inline-block; ">

  <div class="item" id="elem1" draggable="true" style="border-radius: 50%; width:32px; height:32px; position: relative; float:left; left: 30%; top:0; background-color: #FF0004;">&nbsp;1</div>
 
 <div class="item" id="elem2" draggable="true" style="border-radius: 50%; width:32px; height:32px; position: relative; float:left; left: 31%;  top: 0; background-color: #FE8E05;">&nbsp;2</div>
 
 </div>  <!--   id="elemContainer"  -->

<div id="result">result = </div>

<script>
var holdTargetId ;
//  dragElement(holdTargetId) ;

const divGroup = document.getElementById("elemContainer");
const result = document.getElementById("result");

const divGroupPressed = e => {
 
  const isDiv = e.target.nodeName === 'DIV';
 
  if(!isDiv) {
    return
  }
 
 holdTargetId = e.target.id ;
  console.log("holdTargetId = " + holdTargetId) ;
 
  dragElement(holdTargetId) ;
}
divGroup.addEventListener("click", divGroupPressed);

</script>

<script>
var elmnt ;
var timesIn = 0 ;

function dragElement(holdTargetId) {
console.log("function dragElement(elmnt = "  + holdTargetId) ;
  elmnt = holdTargetId ;

//  var savedTargetId = event.target.id ;
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;

   elmnt.onmousedown = dragMouseDown; 
}

  function dragMouseDown(e) {
console.log("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();
console.log("function elementDrag(e)") ;

    // 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:*/
console.log("function closeDragElement()")
    document.onmouseup = null;
    document.onmousemove = null;
  }

</script>

</body></html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,808
Messages
2,569,684
Members
45,444
Latest member
JosefinaAb

Latest Threads

Top