Help with Drag/Drop script

**mburt** · 08-05-2006, 12:53 AM

Okay.

I know there's a more complicating way to do this, but this is the way I do a drag and drop script:

Code:

<html>
<head>
<script type="text/javascript">
function move(id) {
var offsetx = 100
var offsety = 100
document.onmousemove=function() {
id.style.left=event.clientX-offsetx+"px"
id.style.top=event.clientY-offsety+"px"
return false
}
id.onmouseup=function(){
document.onmousemove=null
id.style.left=event.clientX-offsetx+"px"
id.style.top=event.clientY-offsety+"px"
}
}
</script>
<style type="text/css">
.menu{
position:absolute;
width:200px;
height:200px;
padding:2px;
border:1px solid black;
top:0px;
left:0px;
background:#F0F0F0
}
</style>
<body>
<div class="menu" onmousedown="move(this)">test</div>
</body>
</html>

My problem is that it won't work in Mozilla, and help will be appreciated.

**mburt** · 08-05-2006, 01:53 AM

Someone help.. This is almost indecent of you.. (just joking) But seriously, I would like some help on this.

**Twey** · 08-05-2006, 02:28 AM

Code:

<script type="text/javascript">
function move(el) {
  var offsetx = 100,
    offsety = 100;
  document.onmousemove = function(e) {
    var ev = e || window.event;
    el.style.left = ev.clientX - offsetx + "px";
    el.style.top = ev.clientY - offsety + "px";
    return false;
  };
  el.onmouseup = function(e) {
    var ev = e || window.event;
    document.onmousemove = null;
    el.style.left = ev.clientX - offsetx + "px";
    el.style.top = ev.clientY - offsety + "px";
  };
}
</script>

I don't like the way you've designed that script, though. Every time move() is called, those two functions are created all over again.

**mburt** · 08-05-2006, 04:14 PM

Thanks, it works great.

**mburt** · 08-05-2006, 04:18 PM

But I would like the offset to be where your mouse is in the box itself. It drags from the middle currently, but as I said, I would like it to be wherever the cursor is, in relevance to the box.

Thanks in advance.

**Twey** · 08-05-2006, 05:10 PM

Code:

function Point2D(x, y) {
  this.x = x;
  this.y = y;
};

function Oblong2D(l, t, r, b) {
  this.left = l;
  this.top = t;
  this.right = r;
  this.bottom = b;
  this.width = this.right - this.left;
  this.height = this.bottom - this.top;
  this.relCentre = new Point2D(this.width / 2, this.height / 2);
  this.absCentre = new Point2D(this.left + this.relCentre.x, this.top + this.relCentre.y);
};

function getBoundingBox(obj) {
  var curleft = 0,
    oObj = obj;
  if (obj.offsetParent)
    while (obj.offsetParent) {
      curleft += obj.offsetLeft;
      obj = obj.offsetParent;
    }
  else if (obj.x) curleft += obj.x;

  obj = oObj;

  var curtop = 0;
  if (obj.offsetParent)
    while (obj.offsetParent) {
      curtop += obj.offsetTop;
      obj = obj.offsetParent;
    }
  else if (obj.y) curtop += obj.y;

  var curright = curleft + oObj.offsetWidth,
    curbottom = curtop + oObj.offsetHeight;

  return new Oblong2D(curleft, curtop, curright, curbottom);
}


function move(el) {
  var elBounds = getBoundingBox(el);
  document.onmousemove = function(e) {
    var ev = e || window.event;
    el.style.position = "absolute";
    el.style.left = (ev.pageX || ev.clientX + (window.document.body.scrollLeft || window.document.documentElement.scrollLeft)) - elBounds.relCentre.x + "px";
    el.style.top = (ev.pageY || ev.clientY + (window.document.body.scrollTop || window.document.documentElement.scrollTop)) - elBounds.relCentre.y + "px";
    return false;
  };
  el.onmouseup = function(e) {
    var ev = e || window.event;
    document.onmousemove = null;
    this.style.left = (ev.pageX || ev.clientX + (window.document.body.scrollLeft || window.document.documentElement.scrollLeft)) - elBounds.relCentre.x + "px";
    this.style.top = (ev.pageY || ev.clientY + (window.document.body.scrollTop || window.document.documentElement.scrollTop)) - elBounds.relCentre.y + "px";
  };
}

**mburt** · 08-05-2006, 05:14 PM

It still moves the box to the middle?? I'll try to work it out in the meantime though.

**mburt** · 08-05-2006, 05:40 PM

Okay, I've solved it. I subtracted the id's left from event.clientX to get the offsetx, and the same for offsety:

Code:

<html>
<head>
<script type="text/javascript">
function move(id,e) {
var ev = e || window.event
var offsetx = ev.clientX-id.style.left.substring(0,id.style.left.length-2)
var offsety = ev.clientY-id.style.top.substring(0,id.style.top.length-2)
document.onmousemove = function(e) {
var ev = e || window.event
id.style.left = ev.clientX-offsetx
id.style.top = ev.clientY-offsety
return false
}
id.onmouseup = function(e) {
var ev = e || window.event
document.onmousemove = null
id.style.left = ev.clientX-offsetx
id.style.top = ev.clientY-offsety
}
}
</script>
<style type="text/css">
.block {
position:absolute;
width:200px;
height:200px;
padding:2px;
border:1px solid black;
top:0;
left:0;
filter:alpha(Opacity:70);
background:#F0F0F0
}
.text {
float:left
}
.mover {
float:right;
}
</style>
</head>
<body>
<div class="block" onmousedown="move(this)">
</div>
</div>
</body>
</html>