Log in

View Full Version : Drag & resize??


shachi
07-15-2006, 03:04 PM
Can anyone guide me how to convert this drag script:



...
<script type="text/javascript">
var ie = document.all;
var ns = document.getElementById && !ie;

var isdrag = false;
var x,y;
var dobj;

function mousemove(e){
if(isdrag){
dobj.style.left = ns ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top = ns ? ty + e.clientY - y : tx + event.clientY - y;
return false;
}
}

functions startDrag(e){
var fobj = ns ? e.target : event.srcElement;
var topelement = ns ? "HTML" : "BODY";

if(fobj.tagName != topelement && fobj.className != "drag"){
fobj = ns ? fobj.parentNode : fobj.parentElement;
}

if(fobj.className == "drag"){
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left + 0);
ty = parseInt(dobj.style.top + 0);
x = ns ? e.clientX : event.clientX;
y = ns ? e.clientY : event.clientY;
document.onmousemove = mousemove;
return false;
}
}
document.onmousedown = startDrag;
document.onmouseup = function(){isdrag=false;}
</script>
<body>
<div style="height:100px;width:100px;background-color:red;position:relative;" class="drag"></div>
...


Into a drag-resize script?? Any help would be greatly appereciated.

And yes, can anyone also tell me how to detect if the element which is to be dragged is in a certain position in the screen?? Something which might help in making a drag-drop shopping cart??

Thank you again.
jr_yeo
07-15-2006, 03:22 PM
something like this :p
http://demo.script.aculo.us/shop

and

http://www.walterzorn.com/dragdrop/demos/frameset/frame.htm :D
shachi
07-15-2006, 05:38 PM
Thanks, but I already have them. I need a way how to make it with my kind of code. Not just download a library and use it. I need to know it myself(What if I need to make it in some other computer and there is a condition where there is no internet?? I cannot rely on the libraries). But thanks anyways.:)
jr_yeo
07-16-2006, 05:55 AM
I need a way how to make it with my kind of code. Not just download a library and use it. I need to know it myself

i so know what ur saying, man :p
shachi
07-16-2006, 03:02 PM
i so know what ur saying, man :p
Thanks for understanding. I was at last able to memorize that whole drag script(and understand it as well).:)

But anyways thanks for your help.
jr_yeo
07-16-2006, 05:17 PM
thanks for your help.

ur welcome :D
shachi
07-17-2006, 12:04 PM
Anyone who has the solution of my problem??
shachi
07-17-2006, 08:09 PM
Anyone who knows a fix for this??
shachi
07-18-2006, 02:52 PM
Oh Please!!! Anyone help me.
tech_support
07-20-2006, 03:11 AM
Can anyone guide me how to convert this drag script:



...
<script type="text/javascript">
var ie = document.all;
var ns = document.getElementById && !ie;

var isdrag = false;
var x,y;
var dobj;

function mousemove(e){
if(isdrag){
dobj.style.left = ns ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top = ns ? ty + e.clientY - y : tx + event.clientY - y;
return false;
}
}

functions startDrag(e){
var fobj = ns ? e.target : event.srcElement;
var topelement = ns ? "HTML" : "BODY";

if(fobj.tagName != topelement && fobj.className != "drag"){
fobj = ns ? fobj.parentNode : fobj.parentElement;
}

if(fobj.className == "drag"){
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left + 0);
ty = parseInt(dobj.style.top + 0);
x = ns ? e.clientX : event.clientX;
y = ns ? e.clientY : event.clientY;
document.onmousemove = mousemove;
return false;
}
}
document.onmousedown = startDrag;
document.onmouseup = function(){isdrag=false;}
</script>
<body>
<div style="height:100px;width:100px;background-color:red;position:relative;" class="drag"></div>
...


Into a drag-resize script?? Any help would be greatly appereciated.

And yes, can anyone also tell me how to detect if the element which is to be dragged is in a certain position in the screen?? Something which might help in making a drag-drop shopping cart??

Thank you again.
There's something wrong with the script....

"Expected ; on line 23"
shachi
07-20-2006, 06:51 AM
LOL that was a typo:



<html>
<head>
<style type="text/css">
.drag{position:relative;}
</style>
<script type="text/javascript">
var ie = document.all;
var ns = document.getElementById && !ie;

var isdrag = false;
var x,y;
var dobj;

function mousemove(e){
if(isdrag){
dobj.style.left = ns ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top = ns ? ty + e.clientY - y : ty + event.clientY - y;
return false;
}
}

function startDrag(e){
var fobj = ns ? e.target : event.srcElement;
var topelement = ns ? "HTML" : "BODY";

if(fobj.tagName != topelement && fobj.className != "drag"){
fobj = ns ? fobj.parentNode : fobj.parentElement;
}

if(fobj.className == "drag"){
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left + 0);
ty = parseInt(dobj.style.top + 0);
x = ns ? e.clientX : event.clientX;
y = ns ? e.clientY : event.clientY;
document.onmousemove = mousemove;
return false;
}
}
document.onmousedown = startDrag;
document.onmouseup = function(){isdrag=false;}
</script>
</head>
<body>
<div style="height:100px;width:100px;background-color:red;position:relative;" class="drag"></div>
</body>
</html>


Here it is.
mburt
07-21-2006, 11:00 PM
What I'm about to say is not going to help you in any way what so ever. But, I have been wondering the same question myself, about the whole "; expected on line 23" thing. I've read the script, I can't debug it, and FrontPage 2003 doesn't help a bit :mad: . I'll be watching this thread!
mburt
07-21-2006, 11:02 PM
Oopss.. i was too lazy to read the rest of the forum..
shachi
07-22-2006, 08:09 AM
If you read the code properly then you would definitely see the "functions startDrag(e)" Notice the "functions"??
shachi
07-22-2006, 07:37 PM
Twey, jscheuer1, or any javascript expert that can actually *help* me??:confused:

What I need is a technique(or a tutorial implementing the drag-drop script I included earlier) to make drop targets. Something *like* shopping carts not shopping carts. :(

Any help??
shachi
07-27-2006, 06:09 PM
ANYONE WHO CAN HELP ME?? I NEED A TO MODIFY THE SCRIPT TO MAKE A DROP TARGET. ANYONE AROUND??:mad: :mad: :mad:
shachi
07-27-2006, 08:06 PM
oh please someone help me. *weep* *weep* :( :(
LinkRenter
08-03-2006, 02:37 PM
Here is your problem

functions startDrag(e){

Should read

function startDrag(e){
LinkRenter
08-03-2006, 02:38 PM
oops, I didnt finish reading the thread either.
shachi
08-03-2006, 02:46 PM
LOL thanks but I solved that problem ages ago. Now I needed to know how to make drop targets but I found the solution just today.:D

Here's the code now:



<html>
<head>
<script type="text/javascript">
var ie = document.all;
var ns = document.getElementById && !ie;
var x,y;
var dobj;
var isdrag = false;

function contDrag(e){
if(isdrag){
dobj.style.left = ns ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top = ns ? ty + e.clientY - y : ty + event.clientY - y;
return false;
}
}

function initDrag(e){
topelements = ns ? "HTML" : "BODY";
fobj = ns ? e.target : e.srcElement;
while(fobj.tagName != topelements && fobj.className != "drag"){
fobj = ns ? fobj.parentNode : fobj.parentElement;
}
if(fobj.className == "drag"){
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left + 0,10);
ty = parseInt(dobj.style.top + 0,10);
x = ns ? e.clientX : event.clientX;
y = ns ? e.clientY : event.clientY;
document.onmousemove = contDrag;
}
var cart = document.getElementById("cart");
}
function termDrag(e){
isdrag = false;
with(document){
targ = getElementById("cart");
obj = getElementById("drag");
space = getElementById("coor");
next = getElementById("nexcoor");
}
targX = parseInt(targ.offsetLeft - 8);
targY = parseInt(targ.offsetTop - 8);
targH = parseInt(targ.offsetHeight);
targW = parseInt(targ.offsetWidth);
targXpW = targX + targW;
targYpH = targY + targH;
objX = parseInt(obj.offsetLeft);
objY = parseInt(obj.offsetTop);
objH = parseInt(obj.offsetHeight);
objW = parseInt(obj.offsetWidth);
objXpW = objX + objW;
objYpH = objY + objH;

if(objX > targX && objY > targY && objX < targXpW && objY < targYpH){
next.innerHTML = "Got It!!!";
} else {
next.innerHTML = "";
}
}
document.onmousedown = initDrag;
document.onmouseup = termDrag;
</script>
<style type="text/css">
div.drag {
width: 100px;
height: 100px;
background-color: red;
position: relative;
z-index: 200;
}
div.drag:active {
cursor: move;
}
div.cart {
width: 500px;
background-color: green;
height: 350px;
position: relative;
left: 300px;
}
</style>
</head>
<body>
<div id="drag" class="drag"></div>
<div id="cart" class="cart"></div>
<div id="coor"></div>
<div id="nexcoor"></div>
</body>
</html>