PDA

View Full Version : 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:



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


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

Twey
08-05-2006, 06:19 PM
Whoops, yeah.

You really want to compensate for scroll offsets in there somewhere though.

mburt
08-05-2006, 07:09 PM
Oh yeah, I forgot about that :)

mburt
08-05-2006, 07:09 PM
I'll include the script you gave previously