DHTML dynamic element drag and drop with handle

**JAB Creations** · 09-03-2010, 02:42 AM

I've been working on a dynamic drag and drop by handle moving element DHTML script and I've flown past the first array of issues only to end up scratching my head on how to process the numbers in the end. All the tutorials I've seen do everything else in the world except concentrate on the core idea.

So the goal is to drag an element by it's handle. I only do things dynamically so to make this work with multiple elements I define the dragger (handle) and the dragged by the className using (className.substr(0,5)=='drag ') to determine if it's a drag handle and document.getElementById(t.className.substr(5)) to determine the ID of the element to be dragged).

The problem I am having is the conceptual approach to how to do the math in regards to the mouse is at X,Y while the element's Left/Top position are at a different X,Y and I want to move them relative. I don't want to do anything unrelated, my only goal is to figure out how to get this working so suggestions (minus anything relating to frameworks) would be welcomed.

Here is the code...

dhtml.xhtml

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>DHTML</title>
<script type="text/javascript">
//<![CDATA[

var drag = {drag: 0};
document.onmousedown=function(e) {drag.drag = 1; move(e);};
document.onmousemove=function(e) {if (drag.drag==1) {move(e);}};
document.onmouseup=function() {drag.drag = 0; /*document.getElementById('status').value='0';*/};


function move(e)
{
 if (!e) {e = window.event;}//IE6 OR: if (document.all) {e = window.event;}//IE6

 if (e.target) {var t = e.target; var ie = false;}
 else if (e.srcElement) {var t = e.srcElement; var ie = true;}

 if (t.className.substr(0,5)=='drag ')
 {
  var dragged = document.getElementById(t.className.substr(5));

  var l1 = dragged.offsetLeft;
  var t1 = dragged.offsetTop;
 
  var l2 = e.clientX+l1;
  var t2 = e.clientY+t1;

  dragged.style.left = e.clientX+'px';
  dragged.style.top = e.clientY+'px';

  document.getElementById('status').value=e.clientX+'\n'+e.clientY+'\n'+l1+'\n'+t1+'\n'+l2+'\n'+t2;
  var re = false;
 }
 else {re = true;}

 return re;
}
//]]>
</script>
<style type="text/css">
#prompts {background: #ccc; border: solid 1px; border-color: #ccc #aaa #aaa #ccc; height: 398px; left: 50%; margin-top: -198px; margin-left: -369px; position: absolute; top: 50%; width: 738px; z-index: 3;}
#prompts h2 {background-color: #ddd; height: 20px; line-height: 20px; margin: 0px; text-align: center;}
#prompts h2 span {display: block; text-align: center; width: 738px;}
#prompts textarea {height: 373px; width: 734px;}
</style>
</head>

<body>

<div id="prompts">
<h2><span class="drag prompts">Title - This is the Drag Handle</span></h2>
<textarea id="status"></textarea>
</div>

</body>
</html>

**JAB Creations** · 09-03-2010, 04:16 AM

I've started to get things moving slowly and I'm sticking to horizontal movement until I have it ironed out. You can click and drag the left end of the handle and it will move now under some circumstances. The visual of the numbers has helped me out though I'd still welcome useful help.

dhtml.xhtml

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>DHTML</title>
<script type="text/javascript">
//<![CDATA[

var drag = {drag: 0};
document.onmousedown=function(e) {drag.drag = 1; move(e,1);};
document.onmousemove=function(e) {if (drag.drag==1) {move(e,0);}};
document.onmouseup=function() {drag.drag = 0; /*document.getElementById('status').value='0';*/};

var cur_x_init = 0;
var cur_y_init = 0;
var dragged_x_init = 0;
var dragged_y_init = 0;

var dragged_x = 0;
var dragged_y = 0;
var init_dif_x = 0;
var init_dif_y = 0;

function move(e,init)
{
 if (!e) {e = window.event;}//IE6 OR: if (document.all) {e = window.event;}//IE6

 if (e.target) {var t = e.target; var ie = false;}
 else if (e.srcElement) {var t = e.srcElement; var ie = true;}

 if (t.className.substr(0,5)=='drag ')
 {
  var dragged = document.getElementById(t.className.substr(5));

  if (init==1)
  {
   cur_x_init = e.clientX;
   cur_y_init = e.clientY;
   dragged_x_init = dragged.offsetLeft;
   dragged_y_init = dragged.offsetTop;
  }
  else
  {
   dragged_x = dragged.offsetLeft;
   dragged_y = dragged.offsetTop;

   var l = e.clientX - cur_x_init;
   var t = e.clientY - cur_y_init;
   dragged.style.left = dragged_x_init + l+'px';
   //dragged.style.top = dragged_y_init + t+'px';
  }
  //var xpos = e.clientX-init_dif_x;

  document.getElementById('status').value='Init: '+init+'\nCur Init X: '+cur_x_init+'\nCur Init Y: '+cur_y_init+'\nCur X: '+e.clientX+'\nCur Y: '+e.clientY+'\nDragged Init X: '+dragged_x_init+'\nDragged Init Y: '+dragged_y_init+'\nDragged Left: '+dragged_x+'\nDragged Top: '+dragged_y+'\n'+init_dif_x+'\n'+init_dif_y+'\nxpos = '+xpos;
  var re = false;
 }
 else {re = true;}

 return re;
}
//]]>
</script>
<style type="text/css">
#prompts {background: #ccc; border: solid 1px; border-color: #ccc #aaa #aaa #ccc; height: 398px; left: 50%; margin-top: -198px; margin-left: -369px; position: absolute; top: 50%; width: 738px; z-index: 3;}
#prompts h2 {background-color: #ddd; height: 20px; line-height: 20px; margin: 0px; text-align: center;}
#prompts h2 span {display: block; text-align: center; width: 738px;}
#prompts textarea {height: 373px; width: 734px;}
</style>
</head>

<body>

<div id="prompts">
<h2><span class="drag prompts">Title - This is the Drag Handle</span></h2>
<textarea id="status"></textarea>
</div>

</body>
</html>

**JAB Creations** · 09-03-2010, 05:42 AM

The more I am able to convince people that I'm talking to myself the more progress I make...well I'm willing to come off as insane if I kick some serious code donkey.

So I've got the horizontal movement working flawlessly. The jumping issue I realized was half the width of the item when the mouse started moving. I simply divided the clientWidth by 2 and added it to the positioning. Getting the vertical movement to work now should be conceptually simple I hope.

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>DHTML</title>
<script type="text/javascript">
//<![CDATA[
var drag = {drag: 0};
document.onmousedown=function(e) {drag.drag = 1; move(e,1);};
document.onmousemove=function(e) {if (drag.drag==1) {move(e,0);}};
document.onmouseup=function() {drag.drag = 0; /*document.getElementById('status').value='0';*/};

var cur_x_init = 0;
var cur_y_init = 0;
var cur_x_dif = 0;
var cur_y_dif = 0;
var dragged_x_init = 0;
var dragged_y_init = 0;

var dragged_x = 0;
var dragged_y = 0;
var init_dif_x = 0;
var init_dif_y = 0;

function move(e,init)
{
 if (!e) {e = window.event;}//IE6 OR: if (document.all) {e = window.event;}//IE6

 if (e.target) {var t = e.target; var ie = false;}
 else if (e.srcElement) {var t = e.srcElement; var ie = true;}

 if (t.className.substr(0,5)=='drag ')
 {
  var dragged = document.getElementById(t.className.substr(5));

  if (init==1)
  {
   cur_x_init = e.clientX;
   cur_y_init = e.clientY;
   dragged_x_init = dragged.offsetLeft;
   dragged_y_init = dragged.offsetTop;
   
   
  }
  else
  {
   dragged_x = dragged.offsetLeft;
   dragged_y = dragged.offsetTop;
   cur_x_dif = e.clientX - cur_x_init;
   cur_y_dif = e.clientY - cur_y_init;
   
   dragged_half = dragged.clientWidth/2;
   dragged_x_new = dragged_x_init+cur_x_dif+dragged_half;
   dragged.style.left = dragged_x_new+'px';
   //dragged.style.top = dragged_y_init + t+'px';
  }

  document.getElementById('status').value='cur_x_init = '+cur_x_init+'\ncur_x = '+e.clientX+'\ncur_x_dif = '+cur_x_dif+'\ndragged_x_init = '+dragged_x_init+'\ndragged_x_new = '+dragged_x_new;
  //document.getElementById('status').value='Init: '+init+'\nCur Init X: '+cur_x_init+'\nCur Init Y: '+cur_y_init+'\nCur X: '+e.clientX+'\nCur Y: '+e.clientY+'\nDragged Init X: '+dragged_x_init+'\nDragged Init Y: '+dragged_y_init+'\nDragged Left: '+dragged_x+'\nDragged Top: '+dragged_y+'\n'+init_dif_x+'\n'+init_dif_y;
  var re = false;
 }
 else {re = true;}

 return re;
}
//]]>
</script>
<style type="text/css">
#prompts {background: #ccc; border: solid 1px; border-color: #ccc #aaa #aaa #ccc; height: 398px; left: 50%; margin-top: -198px; margin-left: -369px; position: absolute; top: 50%; width: 738px; z-index: 3;}
#prompts h2 {background-color: #ddd; height: 20px; line-height: 20px; margin: 0px; text-align: center;}
#prompts h2 span {display: block; text-align: center; width: 738px;}
#prompts textarea {height: 373px; width: 734px;}
</style>
</head>

<body>

<div id="prompts">
<h2><span class="drag prompts">Title - This is the Drag Handle</span></h2>
<textarea id="status"></textarea>
</div>

</body>
</html>

**JAB Creations** · 09-03-2010, 07:46 AM

This is not final though it is working. It lacks a z-index option so when you move layers over each other you'll lose "grip" of the element that is being dragged. I also don't consider this "clean" as it will be considered "done" when there is a single function you can call from the onload event's anonymous function without anything outside of the move function itself such as the global variables.

I tested this and it works fine in...
IE 5.5+ (Will likely work in IE 5.0)
Opera 7.5+
Firefox 1.0+ / Gecko 1.7+ (Gecko 1.6 was buggy, might not support clientWidth property I think offhand)
Safari 5, didn't test this with any older versions though I'm sure this should work in Safari 3.0 and likely 2.0.

dhtml.xhtml

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>DHTML</title>
<script type="text/javascript">
//<![CDATA[
var drag = {drag: 0};
document.onmousedown=function(e) {drag.drag = 1; move(e,1);};
document.onmousemove=function(e) {if (drag.drag==1) {move(e,0);}};
document.onmouseup=function() {drag.drag = 0; /*document.getElementById('status').value='0';*/};

var cur_x_init = 0;
var cur_y_init = 0;
var cur_x_dif = 0;
var cur_y_dif = 0;
var dragged_x_init = 0;
var dragged_y_init = 0;

function move(e,init)
{
 if (!e) {e = window.event;}//IE6 OR: if (document.all) {e = window.event;}//IE6

 if (e.target) {var t = e.target; var ie = false;}
 else if (e.srcElement) {var t = e.srcElement; var ie = true;}

 if (t.className.substr(0,5)=='drag ')
 {
  var dragged = document.getElementById(t.className.substr(5));

  if (init==1)
  {
   cur_x_init = e.clientX;
   cur_y_init = e.clientY;
   dragged_x_init = dragged.offsetLeft;
   dragged_y_init = dragged.offsetTop;
   
   var dragged_x_new = 0;
   var dragged_y_new = 0;
  }
  else
  {
   cur_x_dif = e.clientX - cur_x_init;
   cur_y_dif = e.clientY - cur_y_init;
   
   var dragged_x_half = dragged.clientWidth/2;
   var dragged_y_half = dragged.clientHeight/2;
   var dragged_x_new = dragged_x_init+cur_x_dif+dragged_x_half;
   var dragged_y_new = dragged_y_init+cur_y_dif+dragged_y_half;
   dragged.style.left = dragged_x_new+'px';
   dragged.style.top = dragged_y_new+'px';
  }

  document.getElementById('status').value='ID = '+t.className.substr(5)+'\ncur_x_init = '+cur_x_init+'\ncur_x = '+e.clientX+'\ncur_x_dif = '+cur_x_dif+'\ndragged_x_init = '+dragged_x_init+'\ndragged_x_new = '+dragged_x_new;
  var re = false;
 }
 else {re = true;}

 return re;
}
//]]>
</script>
<style type="text/css">
body {overflow: hidden;}
.drag {cursor: move;}
div.prompts {background: #ccc; border: solid 1px; border-color: #ccc #aaa #aaa #ccc; height: 398px;  margin-top: -198px; margin-left: -369px; position: absolute; width: 738px;}
div.prompts h2 {background-color: #ddd; height: 20px; line-height: 20px; margin: 0px; text-align: center;}
div.prompts h2:hover {background-color: #fc6;}
div.prompts h2 span {display: block; text-align: center; width: 738px;}
div.prompts textarea {height: 373px; width: 732px;}
#prompt1 {left: 50%; top: 50%; z-index: 3;}
#prompt2 {background-color: #fdd; left: 55%; top: 55%; z-index: 2;}
#prompt3 {background-color: #dfd; left: 60%; top: 60%; z-index: 1;}
#prompt4 {background-color: #ddf; left: 65%; top: 65%; z-index: 0;}
</style>
<!--[if lte IE 7]><style type="text/css">div.prompts textarea {float: right;}</style><![endif]-->
</head>

<body>

<div class="prompts" id="prompt1"><h2><span class="drag prompt1">Prompt 1 - This is the Drag Handle</span></h2><textarea id="status"></textarea></div>

<div class="prompts" id="prompt2"><h2><span class="drag prompt2">Prompt 2 - This is the Drag Handle</span></h2></div>

<div class="prompts" id="prompt3"><h2><span class="drag prompt3">Prompt 3 - This is the Drag Handle</span></h2></div>

<div class="prompts" id="prompt4"><h2><span class="drag prompt4">Prompt 4 - This is the Drag Handle</span></h2></div>

</body>
</html>

**JAB Creations** · 09-04-2010, 03:13 AM

I've added zIndex support now that prevents whatever layer is being dragged from "bumping" in to other layers.

...however Internet Explorer refuses to acknowledge the dragged_z variable regardless of it's scope, where I place it, etc. That's really the only thing keeping this from working flawlessly and I'm giving up after wasting three hours of trying everything I could think of. Thoughts please?

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>DHTML</title>
<script type="text/javascript">
//<![CDATA[
var drag = new function() {this.drag = 0;}
document.onmousedown=function(e) {drag.drag = 1; move(e,1);};
document.onmousemove=function(e) {if (drag.drag==1) {move(e,0);}};
document.onmouseup = function (e) {drag.drag=0;move(e,2);};

var cur_x_init = 0;
var cur_y_init = 0;
var cur_x_dif = 0;
var cur_y_dif = 0;
var dragged_x_init = 0;
var dragged_y_init = 0;
var dragged_z = 0;

function move(e,init)
{
 if (!e) {e = window.event;}//IE6 OR: if (document.all) {e = window.event;}//IE6

 if (e.target) {var t = e.target; var ie = false;}
 else if (e.srcElement) {var t = e.srcElement; var ie = true;}

 if (t.className.substr(0,5)=='drag ')
 {
  var dragged = document.getElementById(t.className.substr(5));

    if (init!=2)
    {
     if (init==1)
     {
      cur_x_init=e.clientX;
      cur_y_init=e.clientY;
      dragged_x_init=dragged.offsetLeft;
      dragged_y_init=dragged.offsetTop;
      dragged_x_new=0;
      dragged_y_new=0;

      if (dragged_z!=9001)
      {
       if (window.getComputedStyle) {z = document.defaultView.getComputedStyle(dragged,null).getPropertyValue('z-index');}
       else if (dragged.currentStyle) {z = dragged.currentStyle['z-index'];}

       if (z!=9001) {dragged_z=z;}

       dragged = dragged.style.zIndex=9001;
      }
     }
     else
     {
      cur_x_dif=e.clientX-cur_x_init;
      cur_y_dif=e.clientY-cur_y_init;
      dragged_x_half=dragged.clientWidth/2;
      dragged_y_half=dragged.clientHeight/2;
      dragged_x_new=dragged_x_init+cur_x_dif+dragged_x_half;
      dragged_y_new=dragged_y_init+cur_y_dif+dragged_y_half;
      dragged.style.left=dragged_x_new+'px';
      dragged.style.top=dragged_y_new+'px';
     }

     document.getElementById('status').value = 'ID = '+t.className.substr(5)+'\ncur_x_init = '+cur_x_init+'\ncur_x = '+e.clientX+'\ncur_x_dif = '+cur_x_dif+'\ndragged_x_init = '+dragged_x_init+'\ndragged_x_new = '+dragged_x_new+'\ndragged_z = '+dragged_z;
     re = false;
    }
    else {document.getElementById(t.className.substr(5)).style.zIndex=dragged_z;}
 }
 else {re = true;}

 return re;
}
//]]>
</script>
<style type="text/css">
body {overflow: hidden;}
.drag {cursor: move;}
div.prompts {background: #ccc; border: solid 1px; border-color: #ccc #aaa #aaa #ccc; height: 398px;  margin-top: -198px; margin-left: -369px; position: absolute; width: 738px;}
div.prompts h2 {background-color: #ddd; height: 20px; line-height: 20px; margin: 0px; text-align: center;}
div.prompts h2:hover {background-color: #fc6;}
div.prompts h2 span {display: block; text-align: center; width: 738px;}
div.prompts textarea {height: 373px; width: 732px;}
#prompt1 {left: 50%; top: 50%; z-index: 3;}
#prompt2 {background-color: #fdd; left: 55%; top: 55%; z-index: 2;}
#prompt3 {background-color: #dfd; left: 60%; top: 60%; z-index: 1;}
#prompt4 {background-color: #ddf; left: 65%; top: 65%; z-index: 0;}
</style>
<!--[if lte IE 7]><style type="text/css">div.prompts textarea {float: right;}</style><![endif]-->
</head>

<body>

<div class="prompts" id="prompt1"><h2><span class="drag prompt1">Prompt 1 - This is the Drag Handle</span></h2><textarea id="status"></textarea></div>

<div class="prompts" id="prompt2"><h2><span class="drag prompt2">Prompt 2 - This is the Drag Handle</span></h2></div>

<div class="prompts" id="prompt3"><h2><span class="drag prompt3">Prompt 3 - This is the Drag Handle</span></h2></div>

<div class="prompts" id="prompt4"><h2><span class="drag prompt4">Prompt 4 - This is the Drag Handle</span></h2></div>

</body>
</html>

**JAB Creations** · 09-04-2010, 10:09 PM

Figured out the problem was that I was not getting the zIndex correctly in IE on line 48. Everything is working great now.

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>DHTML</title>
<script type="text/javascript">
//<![CDATA[
var drag = new function() {this.drag = 0;}
document.onmousedown=function(e) {drag.drag = 1; move(e,1);};
document.onmousemove=function(e) {if (drag.drag==1) {move(e,0);}};
document.onmouseup = function(e) {drag.drag=0;move(e,2);};

var cur_x_init = 0;
var cur_y_init = 0;
var cur_x_dif = 0;
var cur_y_dif = 0;
var dragged_x_init = 0;
var dragged_y_init = 0;
var dragged_z = 0;

function move(e,init)
{
 var dragged,dragged_x_half,dragged_x_new,dragged_y_half,dragged_y_new,ie,re=true,t,z;

 if (!e) {e = window.event;}//IE6 OR: if (document.all) {e = window.event;}//IE6

 if (e.target) {var t = e.target; var ie = false;}
 else if (e.srcElement) {var t = e.srcElement; var ie = true;}

 if (t.className.substr(0,5)=='drag ')
 {
  dragged = document.getElementById(t.className.substr(5));

    if (init!=2)
    {
     if (init==1)
     {
      cur_x_init=e.clientX;
      cur_y_init=e.clientY;
      dragged_x_init=dragged.offsetLeft;
      dragged_y_init=dragged.offsetTop;
      dragged_x_new=0;
      dragged_y_new=0;

      if (dragged_z!=9001)
      {
       if (window.getComputedStyle) {z = document.defaultView.getComputedStyle(dragged,null).getPropertyValue('z-index');}
       else if (dragged.currentStyle) {z = dragged.currentStyle.zIndex;}

       if (z!=9001) {dragged_z=z;}

       dragged = dragged.style.zIndex=9001;
      }
     }
     else
     {
      cur_x_dif=e.clientX-cur_x_init;
      cur_y_dif=e.clientY-cur_y_init;
      dragged_x_half=dragged.clientWidth/2;
      dragged_y_half=dragged.clientHeight/2;
      dragged_x_new=dragged_x_init+cur_x_dif+dragged_x_half;
      dragged_y_new=dragged_y_init+cur_y_dif+dragged_y_half;
      dragged.style.left=dragged_x_new+'px';
      dragged.style.top=dragged_y_new+'px';
     }

     document.getElementById('status').value = 'ID = '+t.className.substr(5)+'\ncur_x_init = '+cur_x_init+'\ncur_x = '+e.clientX+'\ncur_x_dif = '+cur_x_dif+'\ndragged_x_init = '+dragged_x_init+'\ndragged_x_new = '+dragged_x_new+'\ndragged_z = '+dragged_z;
     re = false;
    }
    else {document.getElementById(t.className.substr(5)).style.zIndex=dragged_z;}
 }
 else {re = true;}

 return re;
}
//]]>
</script>
<style type="text/css">
body {overflow: hidden;}
.drag {cursor: move;}
div.prompts {background: #ccc; border: solid 1px; border-color: #ccc #aaa #aaa #ccc; height: 398px;  margin-top: -198px; margin-left: -369px; position: absolute; width: 738px;}
div.prompts h2 {background-color: #ddd; height: 20px; line-height: 20px; margin: 0px; text-align: center;}
div.prompts h2:hover {background-color: #fc6;}
div.prompts h2 span {display: block; text-align: center; width: 738px;}
div.prompts textarea {height: 373px; width: 732px;}
#prompt1 {left: 50%; top: 50%; z-index: 3;}
#prompt2 {background-color: #fdd; left: 55%; top: 55%; z-index: 2;}
#prompt3 {background-color: #dfd; left: 60%; top: 60%; z-index: 1;}
#prompt4 {background-color: #ddf; left: 65%; top: 65%; z-index: 0;}
</style>
<!--[if lte IE 7]><style type="text/css">div.prompts textarea {float: right;}</style><![endif]-->
</head>

<body>

<div class="prompts" id="prompt1"><h2><span class="drag prompt1">Prompt 1 - This is the Drag Handle</span></h2><textarea id="status"></textarea></div>

<div class="prompts" id="prompt2"><h2><span class="drag prompt2">Prompt 2 - This is the Drag Handle</span></h2></div>

<div class="prompts" id="prompt3"><h2><span class="drag prompt3">Prompt 3 - This is the Drag Handle</span></h2></div>

<div class="prompts" id="prompt4"><h2><span class="drag prompt4">Prompt 4 - This is the Drag Handle</span></h2></div>

</body>
</html>

Thread: DHTML dynamic element drag and drop with handle

Thread Tools

Search Thread

DHTML dynamic element drag and drop with handle

Bookmarks

Bookmarks

Posting Permissions