Page 1 of 1

Drag and Drop JavaScript drag and drop elements. Rate Topic: -----

#1 jrm402  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 51
  • View blog
  • Posts: 333
  • Joined: 18-March 10

Posted 08 April 2010 - 02:30 PM

In this tutorial I will walk you through how to utilize Javascript to make items be able to be dragged and dropped.

1. The first thing we want to do is make our HTML file, index.htm, as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Javascript Drag &amp; Drop</title>
	
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	
	<script type="text/javascript" src="script.js"></script>
	<!-- script.js will be the Javascript file where we will put
                our drag and drop functions. -->
	<style>
		* {
			margin: 0;
			padding: 0;
			position: absolute;
		}
		.draggable {
			cursor: progress;
		}
		#item1, #item2 {
			border: 1px solid black; 
			background-color: #00f; 
			color: #fff; 
			font-weight: bold; 
			padding: 75px;
			left: 100px;
			top: 100px;
		}
		#item2 {
			background-color: #f00;
			left: 300px;
		}
	</style>
</head>

<body>
	
	<div id="item1" class="draggable"></div>
	<div id="item2" class="draggable"></div>

</body>

</html>


We're going to utilize the class element here. Any object with the class of 'draggable' will be able to be dragged. We've included two div's with some style in there.

2. Create a Javascript file called 'script.js'. The first thing we want to do in the script.js file is put a mouse listener on mouse down event. We do that as follows.
document.onmousedown = mouseDown;

function mouseDown(e) {

}



Every time the user pushes down the mouse cursor, the function mouseDown will be called.

3. Let's add the same listeners for all of the mouse events we need: mouse up, mouse move, mouse over, and mouse out. Mouse up is the opposit of mouse down, mouse move is when the user moves the mouse, mouse over and out are when the user moves the mouse over and out of an element. Here it is:
document.onmouseup = mouseUp;
document.onmousemove = mouseMove;
document.onmouseover = mouseOver;
document.onmouseout = mouseOut;

function mouseUp() {

}

function mouseMove(e) {

}

function mouseOver(e) {

}

function mouseOut() {

}


We won't need the event variable for mouseOut and mouseUp since all we're going to do is set variables and not actually use any mouse event. (Sorry I don't know really how to explain it, but if you want it, it doesn't hurt to include it. No harm done if you want to keep it in there for sake of uniformity.)

4. We need to declare some variables now to use along the way:
var isMouseDown = false;
var isMouseOver = false;
var obj = null;
var offsetX = offsetY = null;
var zindex = 1;


isMouseDown is a boolean for if the mouse is down or not. isMouseOver is a boolean for if the mouse is over an object with class 'draggable'. obj is the object to be dragged. offsetX and offsetY are the offset the mouse is from the upper-left corner of the object to be dragged. zindex is the z-index of the objects to prevent underlaying dragged items. We use z-index to make sure the dragged item is always on top.

5. We're going to populate the function for when the mouse goes over an element.
function mouseOver(e) {
	obj = e.target;
	
	if(obj.className == "draggable") {
		isMouseOver = true;
	}
	else {
		isMouseOver = false;
		obj = null;
	}
}


Basically we are setting obj to the object we moved over. We use the if/else statement to check if it has the appropriate class. If it does, then we set isMouseOver to true because we are on a valid element. If not, we set the obj var back to null and isMouseOver to false because it is not a valid element.

6. Now we will do the function for when the user moves off of an element.
function mouseOut(e) {
	isMouseOver = false;
	obj = null;
}


Easy, huh? Same as the else above in step 5.

7. Now lets handle the mouse down function.
function mouseDown(e) {
	if(!e) {
		if(window.event) {
			e = window.event;
		}
		else {
			alert('Your browser does not support the event handler. Please upgrade or try a different browser.');
			return;
		}
	}
	if(isMouseOver) {
		isMouseDown = true;
		offsetX = e.clientX - parseInt(obj.offsetLeft);
		offsetY = e.clientY - parseInt(obj.offsetTop);
		obj.style.zIndex = 9999;
	}
}


The first if, if (!e) checks for if there was an issue with the event handler. If there was we check if there is another way we can do it. If not that way either, than alert the user that they cannot use our script until they update their browser.

Next, we check to see if the user is over an object. If they are then we set isMouseDown to true because they are over an object and have their mouse down. We set offsetX and offsetY to the X and Y distance to the upper-left corner of the object so when we move the mouse the objects upper-left corner doesn't jump right to our mouse spot. Next, we set the z-index to a large number to make sure that our item is on top of everything and nothing will interfere with it.

8. Now we will handle the mouse up function:
function mouseUp() {
	isMouseDown = false;
	if(obj != null) {
		obj.style.zIndex = zindex;
		zindex++;
	}
}


isMouseDown now becomes false because the mouse is not down. Next we have to check if our obj is not null. If the obj was null then we would throw a Javascript error when we tried to set the z-index back to normal on a 'null' element. We now increment the z-index so if we drop an object down on top of another element it stays on top of it.

9. Now for the most important function of all, mouse move. Here it is:
function mouseMove(e) {
	if(!e) {
		if(window.event) {
			e = window.event;
		}
		else {
			alert('Your browser does not support the event handler. Please upgrade or try a different browser.');
			return;
		}
	}
	if(isMouseDown && isMouseOver && obj != null) {
		obj.style.position = "absolute";
		obj.style.margin = "0px";
		obj.style.left = e.clientX - offsetX + "px";
		obj.style.top = e.clientY - offsetY + "px";
	}
}


First, we check the event is valid like in step 7.

Now we check if everything is right before we try to drag something that we are not clicked on. So if the mouse is down, the mouse is over a valid object, and the object we are over is not null we proceed to the moving part.

First we set the position of the element to 'absolute' in case it was not already set that way. We use absolute because we are going to be applying CSS left and top properties to the element. Now we set any margins the element has to 0 so we have no conflict with the object jumping on us. If the elements had margins the element would appear to jump by whatever the margin was as we moved.

obj.style.left = e.clientX - offsetX + "px";: Sets the left to the mouse X position - the X offset on the image in pixels.
obj.style.top = e.clientY - offsetY + "px";: Sets the top to the mouse Y position - the Y offset on the image in pixels.

Remember, those are the offsets we declared earlier in the program, back in step 7: on mouse down.

So that's it. Here is the final product. Hope you enjoy! :)
var isMouseDown = false;
var isMouseOver = false;
var obj = null;
var offsetX = offsetY = null;
var zindex = 1;

document.onmousedown = mouseDown;
document.onmouseup = mouseUp;
document.onmousemove = mouseMove;
document.onmouseover = mouseOver;
document.onmouseout = mouseOut;

function mouseOver(e) {
	obj = e.target;
	
	if(obj.className == "draggable") {
		isMouseOver = true;
	}
	else {
		isMouseOver = false;
		obj = null;
	}
}

function mouseOut(e) {
	isMouseOver = false;
	obj = null;
}

function mouseDown(e) {
	if(!e) {
		if(window.event) {
			e = window.event;
		}
		else {
			alert('Your browser does not support the event handler. Please upgrade or try a different browser.');
			return;
		}
	}
	if(isMouseOver) {
		isMouseDown = true;
		offsetX = e.clientX - parseInt(obj.offsetLeft);
		offsetY = e.clientY - parseInt(obj.offsetTop);
		obj.style.zIndex = 9999;
	}
}

function mouseUp() {
	isMouseDown = false;
	if(obj != null) {
		obj.style.zIndex = zindex;
		zindex++;
	}
}

function mouseMove(e) {
	if(!e) {
		if(window.event) {
			e = window.event;
		}
		else {
			alert('Your browser does not support the event handler. Please upgrade or try a different browser.');
			return;
		}
	}
	if(isMouseDown && isMouseOver && obj != null) {
		obj.style.position = "absolute";
		obj.style.margin = "0px";
		obj.style.left = e.clientX - offsetX + "px";
		obj.style.top = e.clientY - offsetY + "px";
	}
}



jrm402

Is This A Good Question/Topic? 1
  • +

Replies To: Drag and Drop

#2 amagiatly  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 18-February 11

Posted 28 April 2011 - 08:05 AM

Someone told me how to do this before...I know there is a drag and drog feature for the dynamic files. When I click on that Wzxkfjgld something editor, a yellow error button with the exclamation point comes up. How can I get to the drag and drop editor for the comic body? Thanks
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1