DHTML Dragging and Dropping...

**pcbrainbuster** · 04-05-2007, 12:35 AM

Hello agian everyone

,

Again as always I have yet more questions... And this time as the title suggests is "how do I create a script that will allow drag on an object"...

**mburt** · 04-05-2007, 12:46 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Dom Drag/Drop</title>
<script type="text/javascript">
var ie = document.all;
var ns = document.getElementById && !ie;
function dragbyclass(e) {
var fobj = ns ? e.target : event.srcElement;
if (fobj.tagName=="DIV" && fobj.className=="drag") {
	var ev=e||event;
	var offsetx=ev.clientX-fobj.offsetLeft;
	var offsety=ev.clientY-fobj.offsetTop;
		document.onmousemove=function mousemove() {
			fobj.style.left=ev.clientX-offsetx;
			fobj.style.top=ev.clientY-offsety;
				if (fobj.offsetLeft < 1) {
					fobj.style.left = 1;
					return false;
					}
				else if (fobj.offsetTop < 1) {
					fobj.style.top = 1;
					return false;
					}
				else if ((fobj.offsetTop + fobj.offsetHeight) > 706) {
					fobj.style.top = 706;
					return false;
					}
				else {document.onmousemove = mousemove;}
			return false
			}
		fobj.onmouseup=function() {
			document.onmousemove=null;
			}
		}
}
document.onmousedown=dragbyclass;
</script>
<style type="text/css">
.drag {
width:200px;
height:200px;
position:absolute;
border:1px solid black;
background:silver
}
</style>
</head>
<body>
<div class="drag" style="left:40px;top:60px;z-index:100">Drag number ONE</div>
<div class="drag" style="left:40px;top:60px">Drag number TWO</div>
</body>
</html>

**pcbrainbuster** · 04-05-2007, 01:20 AM

Thanks Mike for your post but what I wanted was something I could relate to, though it is still ok I still understand it a little

...

I might need to look at more examples over the internet to see how everyone does and find a more easier thing to relate to unless you give me a easier script

**mburt** · 04-05-2007, 01:27 AM

There is no "easier script". Understanding javascript, is understanding javascript. You should be able to understand that, as it relies on basic principles. If not, you need to read up a good js tutorial.

**pcbrainbuster** · 04-05-2007, 02:19 AM

No no thats not what I meant... What I ment was that since I am a begginer to this (drag) aspect of JavaScript, what you did was a little strong in that aspect...

But I simply understand what was going on (otherwise I can not call myself a JavaScripter, if I don't understand what I am doing)...

Well GoodNight from my end

**shachi** · 04-05-2007, 08:46 AM

pcbrainbuster: As you want to create a dnd script, I think you should first understand the principals of basic dnd.

It goes as follows:

Code:

When the user clicks an object and moves his/her mouse around, move the object the mouse is clicking, which is done by:

var stupid = false;

document.onmousedown = function(){
// this block is triggered when the user clicks on the object
var stupid = true;
document.onmousemove = function(){
if(stupid == true){
// this block is triggered when the user's mouse is down and the mouse is moving, that is ... "dragging", the element's position will be the coordinates of the mouse position plus some simple mathematics
}
}
}

document.onmouseup = function(){
stupid = false;
}

I think that's the simplest it can get.

And that's that. Hope it helps.

**mburt** · 04-05-2007, 10:06 AM

Again, simply the fundamentals of javascript. pcbrainbuster should look that up on the web, if he/she doesn't know what boolean values do and how they work.

**shachi** · 04-05-2007, 11:20 AM

Yep, mike is completely right. If you don't get anything, go back to the basics. They will definitely help you.

**pcbrainbuster** · 04-05-2007, 09:24 PM

Well I tried to maake my own drag script from what I learned from you two and here it is -

<html>
<head>
<style>
.drag {
position: relative;
border: 1px solid;
background-color: red;
color: yellow;
top: 5cm;
left: 5cm;
width: 2cm;
height: 2cm;}
</style>
</head>
<body bgcolor="black">
<div class="dragable" style="z-index:1" onmousedown="drags(this)">Shachi</div>
<div class="dragable" style="z-index:2" onmousedown="drags(this)">mburt</div>
<script>
var hold=0
function drags(item) {
hold=1
if (item.class=="dragable" && hold==1) {
item.style.offsetLeft=event.x-item.style.offsetLeft
item.style.offsetTop=event.y-item.style.offsetTop
document.onmousemove=function() {drags(item)}}
}

document.onmouseup=new function("hold=0")
</script>
</body>
</html>

Though there is a problem, the div turns invisible and ther eis nothing on the screen, mind helping me out?

And FYI you lot misunderstood what I meant by I don't understand

Thanks

**mburt** · 04-05-2007, 09:53 PM

The "class" attribute is always referred to as "className".
Also, you serverely messed up your attributes.

1) OFFSETLEFT/TOP IS NOT AN ATTRIBUTE WHICH CAN HAVE VALUES APPLIED TO IT
2) event.x/y should be event.clientX/Y
3) document.onmousemove is inside of drags(), so calling it again would create an unwanted loop.
4)You're neglecting the fact that event is IE only, use "e".

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>drag/drop</title>
<style type="text/css">
.dragable {
position: absolute;
border: 1px solid;
background-color: red;
background: yellow;
top: 5;
left: 5;
width:200px;height:200px;
}
</style>
<script type="text/javascript">
function drag(item,e) {
var ev = e||event;
if (item.className=="dragable") {
	var offsetx = (ev.clientX-item.offsetLeft),offsety = (ev.clientY-item.offsetTop);
	document.onmousemove=function() {
		item.style.left=ev.clientX-offsetx;
		item.style.top=ev.clientY-offsety;
		}
	document.onmouseup=function(){document.onmousemove=null;}
	}
}
</script>
</head>
<body bgcolor="black">
<div class="dragable" style="z-index:1" onmousedown="drag(this)">Shachi</div>
<div class="dragable" style="z-index:2;top:300px;" onmousedown="drag(this)">mburt</div>
</body>
</html>

Sorry for the outburst, but you are extremely annoying in the fact that you don't what attributes do what.

Thread: DHTML Dragging and Dropping...

Thread Tools

Search Thread

DHTML Dragging and Dropping...

Bookmarks

Bookmarks

Posting Permissions