PDA

View Full Version : How to get this "cool" effect?



jpaulraj
06-15-2005, 10:56 AM
Pls go to this page

http://www.mixonic.com/ (http://www.mixonic.com/action/LabelTextPre)

In this page, once you add a text, its displayed on the CD. Now you can move the text around the CD by dragging the text with your mouse. I need a similar effect (dragging text, picture with mouse) for one of my application that im working on. :confused:

PLEASE post me a link for a tutor which shows how this is done or pls post a code/script.

Thanks in advance.

jscheuer1
06-18-2005, 07:38 AM
I'm not sure how they did that but, I don't like it because the text doesn't go exactly where I drag it to and everything disappears while I am dragging it. This link has a much better solution that may be adaptable to whatever your actual purpose (you weren't real clear about that) is:

http://www.walterzorn.com/dragdrop/dragdrop_e.htm

Twey
06-18-2005, 08:48 AM
You need to capture the mouse event, then set the element's left and top properties to the x and y of the mouse event, respectively.



<html>
<head>
<title>
Drag
</title>
<style type="text/css">
#draggable {
position: absolute;
top: 0;
left: 0;
}
</style>
<script type="text/javascript">
<!--
drag = false;

function mdHandle() {
drag = !drag;
}

function mvHandle(evt) {
if(drag) {
obj = document.getElementById("draggable");
obj.style.top = (evt.pageY - 88) + "px";
obj.style.left = (evt.pageX - 88) + "px";
}
}
//-->
</script>
</head>
<body onmousemove="mvHandle(event);">
<div id="draggable" onmousedown="mdHandle();">
<img src="http://www.grand-illusions.com/images/moonphoto.jpg"/>
</div>
</body>
</html>

Adjust as needed.

jscheuer1
06-18-2005, 08:08 PM
You need to capture the mouse event, then set the element's left and top properties to the x and y of the mouse event, respectively.Good idea but, your execution is jerky under Mozilla and error riden under IE6.

jpaulraj
06-20-2005, 04:40 AM
Thanks. But i need to drag the element (text or image) within a boundary - square or circle. How do get this done. The examples i see on walterzorn is good, but i can drag the image through the whole page and not within a limited boundary :confused:

jscheuer1
06-20-2005, 06:51 AM
The script has optional parameters for setting top, bottom, left and right limits to the dragability. See this page for a demo and explanation of this and many other options:

http://www.walterzorn.com/dragdrop/commands_e.htm