How to get this "cool" effect?

**jpaulraj** · 06-15-2005, 10:56 AM

Pls go to this page

http://www.mixonic.com/

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.

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

<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

Originally Posted by Twey

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

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

Thread: How to get this "cool" effect?

Thread Tools

Search Thread

How to get this "cool" effect?

Bookmarks

Bookmarks

Posting Permissions