PDA

View Full Version : restrict dragging images to a div



khizar
07-07-2009, 11:40 AM
guys some help needed hre. i a total newbie to javascript n i was trying to make some images draggable using a script i got frm sumwhr by Kurt Grigg. it works like a charm but i have a problem..... this script move the image all over the page n i want it to remain within the div tht it was inserted in. i am using sum very simple js to insert the image to the photoeditor div. but thn i dun know how to restrict it in tht div........:confused:

wud luv sum help !! hres the script





<script type="text/javascript">
//Drag and Drop script - http://www.btinternet.com/~kurt.grigg/javascript

if (document.getElementById){

(function(){

//Stop Opera selecting anything whilst dragging.
if (window.opera){
document.write("<input type='hidden' id='Q' value=' '>");
}

var n = 500;
var dragok = false;
var y,x,d,dy,dx;

function move(e){
if (!e) e = window.event;
if (dragok){
d.style.left = dx + e.clientX - x + "px";
d.style.top = dy + e.clientY - y + "px";
return false;
}
}

function down(e){
if (!e) e = window.event;
var temp = (typeof e.target != "undefined")?e.target:e.srcElement;
if (temp.tagName != "HTML"|"BODY" && temp.className != "dragclass"){
temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;
}
if (temp.className == "dragclass"){
if (window.opera){
document.getElementById("Q").focus();
}
dragok = true;
temp.style.zIndex = n++;
d = temp;
dx = parseInt(temp.style.left+0);
dy = parseInt(temp.style.top+0);
x = e.clientX;
y = e.clientY;
document.onmousemove = move;
return false;
}
}

function up(){
dragok = false;
document.onmousemove = null;
}

document.onmousedown = down;
document.onmouseup = up;

})();
}//End.

vwphillips
07-07-2009, 01:10 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/
//Drag and Drop script - http://www.btinternet.com/~kurt.grigg/javascript

if (document.getElementById){

(function(){

//Stop Opera selecting anything whilst dragging.
if (window.opera){
document.write("<input type='hidden' id='Q' value=' '>");
}

var n = 500;
var dragok = false;
var y,x,d,dy,dx;

function move(e){
if (!e) e = window.event;
if (dragok){
var lft=dx + e.clientX - x,top=dy + e.clientY - y;
if (lft>0&&lft<d.parentNode.offsetWidth-d.offsetWidth-2&&top>0&&top<d.parentNode.offsetHeight-d.offsetHeight-2){
d.style.left = lft + "px";
d.style.top = top + "px";
}
return false;
}
}

function down(e){
if (!e) e = window.event;
var temp = (typeof e.target != "undefined")?e.target:e.srcElement;
if (temp.tagName != "HTML"|"BODY" && temp.className != "dragclass"){
temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;
}
if (temp.className == "dragclass"){
if (window.opera){
document.getElementById("Q").focus();
}
dragok = true;
temp.style.zIndex = n++;
d = temp;
dx = parseInt(temp.style.left+0);
dy = parseInt(temp.style.top+0);
x = e.clientX;
y = e.clientY;
document.onmousemove = move;
return false;
}
}

function up(){
dragok = false;
document.onmousemove = null;
}

document.onmousedown = down;
document.onmouseup = up;

})();
}//End.

/*]]>*/
</script></head>

<body>
<div style="position:relative;width:200px;height:200px;left:20px;top:20px;border:solid black 1px;">
<img class="dragclass" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50" style="position:absolute;left:20px;top:20px;" />
</div>
</body>

</html>

see also

http://www.vicsjavascripts.org.uk/DragDrop/DragDrop.htm

khizar
07-08-2009, 04:09 AM
thanx mate....just wat i needed .... i tried to use the same condition but wasnt working for me...didnt kno abt the offsetWidth n was using pixels directly :rolleyes:

nywayz thanx a load :)