Drag and Drop problem.

@sh1noJun 18.2005

Hi, im new to javascript and CSS.

I have made a little drag and drop application.

Im basically drag and dropping a “DIV” or “TABLE” inside a TABLE with a background image.

My problem is, the dragging works, but its not fluid, its not smooth, it chunks up kinda as if its lagging, you know when your PC is working too hard and you try to move your icons too fast you see it move but it makes big jumps.

We’ll I checked other previous codes and mine isn’t bad, it’s probably not good either, but I don’t get why its so choppy.

Can anyone help?

I’ll paste the code here.

function setposition() {
if (cObject != null) {
cObject.style.left = lastX + event.clientX – curX;
cObject.style.top = lastY + event.clientY – curY;

}

}

function startdrag(object) {
cObject = document.getElementById(object);
curX = event.clientX;
curY = event.clientY;
}

function stopdrag(object) {
if (cObject != null) {
lastX = parseInt(cObject.style.left+0);
lastY = parseInt(cObject.style.top+0);
cObject = null;
}
}

See these are my 3 functions. I use the events:
onmousedown=”startdrag(‘element’);”
onmousemove=”setposition();”
onmouseup=”stopdrag(‘element’);”

If anyone can give me tips on how to improve it maybe, or just why its choppy I would appreciate it. Thanks.

to post a comment

JavaScript

21 Comments(s) _↴

@Khalid_AliJun 18.2005 — #seems like you are not accounting for the objects position from the immidiate parent components.

[url=http://www.webapplikations.com/pages/html_js/image_examples/ImageDragAndDrop.html]Here is one that I wrote for helping others[/url] to uderstand this functionality, I am sure it will answer ur question

@sh1noauthorJun 18.2005 — #Thanks for the fast reply. I appreciate your example and help.

I also have another small question.

When I try:

window.captureEvents(event.MOUSEUP);

window.onmouseup= stopdrag();

These examples that I had found on a website.

It always gives me an error saying "this object does not support this property."

Although I find it odd since it comes from an actual example, is there a reason I get this problem? Thanks.

@Khalid_AliJun 19.2005 — #Thanks for the fast reply. I appreciate your example and help.

window.captureEvents(event.MOUSEUP);

window.onmouseup= stopdrag();

Although I find it odd since it comes from an actual example, is there a reason I get this problem? Thanks.[/QUOTE]

you have a problem in your implementation

this line

[b]

window.onmouseup= stopdrag();

[/b]

should be

[b]

window.onmouseup= stopdrag;

[/b]

because you are telling the JS engine to refer to a function..

@sh1noauthorJun 19.2005 — #you have a problem in your implementation

this line

[b]

window.onmouseup= stopdrag();

[/b]

should be

[b]

window.onmouseup= stopdrag;

[/b]

because you are telling the JS engine to refer to a function..[/QUOTE]

Hi thanks again for replying, I did what you said put instead:

window.onmouseup= stopdrag;

which gave me the same error. object does not support this property.

I think its referring to the:

window.captureEvents(event.MOUSEUP);

because at first I had put

window.captureEvents(Event.MOUSEUP);

and it told me the Event was not defined.

So I had to put it all lowercase for it to work.

I don't know why.

Anyhow, stopdrag() is afunction i added on the script.

But i really think its because of the Event.mouseup.

Any clue?

@ilyaJun 19.2005 — #can you please share your drag and drop script with me? Cuz thats exactly what im looking for but i also need the divs dockable.

@Khalid_AliJun 19.2005 — #[b]"this object does not support this property."[/b]

This error means that you are trying to access an invalid property for an object. As you already have mentioned that code does work and is live for viewing on the page I linked above.

I would like to see your implementation of the code. I am 100% positive you implemented it wrong...

@sh1noauthorJun 19.2005 — #[b]"this object does not support this property."[/b]

This error means that you are trying to access an invalid property for an object. As you already have mentioned that code does work and is live for viewing on the page I linked above.

I would like to see your implementation of the code. I am 100% positive you implemented it wrong...[/QUOTE]

To keep it clean without all the other html tags this is what I have.

I just did a test php file with:

<script language="javascript">

function init() {

window.captureEvents(event.MOUSEUP);

window.onmouseup= stopdrag;

}

</script>

<body onload="init();">

</body>

And upon loading i get the same error msg. Object doesn't support this property.

Strange huh?

@Khalid_AliJun 19.2005 — #first off pu the following lines of code out side of the init function

window.captureEvents(event.MOUSEUP);

window.onmouseup= stopdrag;

then when I say show the code that means full code, better yet if you have the page a site that some one can access using internet is even better.

@sh1noauthorJun 20.2005 — #first off pu the following lines of code out side of the init function

window.captureEvents(event.MOUSEUP);

window.onmouseup= stopdrag;

then when I say show the code that means full code, better yet if you have the page a site that some one can access using internet is even better.[/QUOTE]

That is the full code, I tried it in a .php page and it gave me that error.

Those lines only. If you dont believe me try it.

http://shino.no-ip.com/dragdrop.php

and if you look at:

http://www.mozilla.org/docs/dom/domref/dom_window_ref6.html

This is from where I got the example of init(); and body onload.

I dont know what else to show u.

@Khalid_AliJun 20.2005 — #As I said problem is in your implementation. JavaScript is case sensitive language.

this line

window.captureEvents(event.MOUSEUP);

should be like this

window.captureEvents(Event.MOUSEUP);

and this line as I told u befor e

window.onmouseup= stopdrag();

should be like this

window.onmouseup= stopdrag;

@sh1noauthorJun 20.2005 — #As I said problem is in your implementation. JavaScript is case sensitive language.

this line

window.captureEvents(event.MOUSEUP);

should be like this

window.captureEvents(Event.MOUSEUP);

and this line as I told u befor e

window.onmouseup= stopdrag();

should be like this

window.onmouseup= stopdrag;[/QUOTE]

Ok now i tried the following in a blank dragdop.php file:

Exactly like you said.

<script language="javascript">

function init() {

window.captureEvents(Event.MOUSEUP);

window.onmouseup= stopdrag;

}

</script>

<body onload="init();">

</body>

and now I get the same error I got previously which is:

"Event is undefined."

What do you think?

@Khalid_AliJun 20.2005 — #Ok here is the deal.

this line here is only for older netscape type browsers.

window.captureEvents(Event.MOUSEUP);

As far as I know now adays the latest browser from mozila does not necessarily require that construct to capture event.

anyways here is what you are trying to do and its a working example for u

[code=php]
 <script type="text/javascript">
 <!--
 function init() {
 if(!document.all){
 window.captureEvents(Event.MOUSEUP);
 }
 }
 function stopdrag(e){
 alert("Clicked")
 }
 document.onmouseup= stopdrag;
 //-->
 </script>
 </head>
 <body class="body" onload="init();">
 
 </body>
 [/code]

@sh1noauthorJun 20.2005 — #Ok here is the deal.

this line here is only for older netscape type browsers.

window.captureEvents(Event.MOUSEUP);

As far as I know now adays the latest browser from mozila does not necessarily require that construct to capture event.

anyways here is what you are trying to do and its a working example for u

[code=php]
 <script type="text/javascript">
 <!--
 function init() {
 if(!document.all){
 window.captureEvents(Event.MOUSEUP);
 }
 }
 function stopdrag(e){
 alert("Clicked")
 }
 document.onmouseup= stopdrag;
 //-->
 </script>
 </head>
 <body class="body" onload="init();">
 
 </body>
 [/code]

[/QUOTE]

Thanks, that example worked.

Although I still don't get why it didn't work properly.

I did some tests by removing some lines to make it exactly the same as I had it before and this is what I noticed:

"if(!document.all){" < this line fixed the problem on load.

Is there a reason why if removed it don't work. Would you know why it is required in such a case?

And also i'd like to know why you put type="text/javascript" instead of just language="javascript" which is better?

Thanks for the help.

@Khalid_AliJun 20.2005 — #Thanks, that example worked.
[/QUOTE]
[color=green] You are welcome[/color]

Thanks, that example worked.

"if(!document.all){" < this line fixed the problem on load.

Is there a reason why if removed it don't work. Would you know why it is required in such a case?
[/QUOTE]
[color=green]if(!document.all) this condition makes sure that the piece of code that follows only executed when its not a modern or legacy IE browser(![/color]

And also i'd like to know why you put type="text/javascript" instead of just language="javascript" which is better?

Thanks for the help.[/QUOTE]

[color=green]

language attribute is deprecated and should not be used any more

[/color]

@sh1noauthorJun 20.2005 — #[color=green] You are welcome[/color]

[color=green]if(!document.all) this condition makes sure that the piece of code that follows only executed when its not a modern or legacy IE browser(![/color]

[color=green]

language attribute is deprecated and should not be used any more

[/color][/QUOTE]

Thank you big help ?

@sh1noauthorJun 26.2005 — #Hi, would you or anyone have a simpler example?

My scenario is basically I have a table that I set a title on, and I want to be able to click on the title like a "window" and drag it around.

All I need is a simplified clear way to do it.

Your example is great but is a bit too complex for me as a beginner.

Anyone?

@vwphillipsJun 26.2005 — #

[CODE]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
 <html>
 
 <head>
 <title></title>
 <script language="JavaScript" type="text/javascript">
 <!--
 
 zxcDockAry=new Array();
 function zxcInit() {
 document.getElementById('Move').onmousedown=function(event) { zxcMseDown(event,this);}
 document.getElementById('Move2').onmousedown=function(event) { zxcMseDown(event,this);}
 // remove next 6 lines if docking not required
 zxcobjs=document.getElementsByTagName('BODY')[0].getElementsByTagName('*');
 for (zxc0=0;zxc0<zxcobjs.length;zxc0++){
 if (zxcobjs[zxc0].className=='Dock'){
 zxcDockAry[zxcDockAry.length]=zxcobjs[zxc0];
 }
 }
 }
 
 function zxcMseDown(event,obj) {
 document.onmousemove=function(event){zxcDrag(event);}
 document.onmouseup=function(event){zxcMseUp(event);}
 zxcObj=obj;
 zxcMse(event);
 zxcDragX=zxcMseX-zxcObj.offsetLeft;
 zxcDragY=zxcMseY-zxcObj.offsetTop;
 }
 
 function zxcMseUp(event){
 document.onmousemove=null; zxcDragX=-1;  zxcDragY=-1;
 // remove next 7 lines if docking not required
 for (zxc0=0;zxc0<zxcDockAry.length;zxc0++){
 if (zxcPos(zxcObj)[0]>zxcPos(zxcDockAry[zxc0])[0]&&zxcPos(zxcObj)[0]+zxcObj.offsetWidth<zxcPos(zxcDockAry[zxc0])[0]+zxcDockAry[zxc0].offsetWidth&&zxcPos(zxcObj)[1]>zxcPos(zxcDockAry[zxc0])[1]&&zxcPos(zxcObj)[1]+zxcObj.offsetHeight<zxcPos(zxcDockAry[zxc0])[1]+zxcDockAry[zxc0].offsetHeight){
 zxcObj.style.left=zxcPos(zxcDockAry[zxc0])[0]+'px';
 zxcObj.style.top=zxcPos(zxcDockAry[zxc0])[1]+'px';
 alert('Docked');
 }
 }
 }
 
 function zxcDrag(event){
 zxcMse(event);
 zxcObj.style.left=(zxcMseX-zxcDragX)+'px';
 zxcObj.style.top=(zxcMseY-zxcDragY)+'px';
 }
 
 function zxcMse(event){
 if(!event) var event=window.event;
 if (document.all){ zxcMseX=event.clientX; zxcMseY=event.clientY; }
 else {zxcMseX=event.pageX; zxcMseY=event.pageY; }
 }
 
 function zxcPos(zxc){
 zxcObjLeft = zxc.offsetLeft;
 zxcObjTop = zxc.offsetTop;
 while(zxc.offsetParent!=null){
 zxcObjParent=zxc.offsetParent;
 zxcObjLeft+=zxcObjParent.offsetLeft;
 zxcObjTop+=zxcObjParent.offsetTop;
 zxc=zxcObjParent;
 }
 return [zxcObjLeft,zxcObjTop];
 }
 
 
 
 //-->
 </script>
 </head>
 
 <body onload="zxcInit();" >
 <div id=Move style="position:absolute;z-Index:2;width:100px;height:100px;background-Color:red;" >Move and Dock Me on another square
 </div>
 <table id=Move2 style="position:absolute;top:100px;z-Index:2;background-Color:red;" width="200" height="100" border="1">
 <tr>
 <td>Move Me</td>
 </tr>
 <tr>
 <td>To where you want</td>
 </tr>
 </table><center><div class="Dock" style="position:relative;width:110px;height:110px;background-Color:blue;" >
 </div>
 <div class="Dock" style="position:relative;width:110px;height:110px;background-Color:YELLOW;" >
 </div>
 <div class="Dock" style="position:relative;width:110px;height:110px;background-Color:green;" >
 </div>
 </center>
 <div class="Dock" style="position:relative;width:110px;height:110px;background-Color:silver;" >
 </div>
 
 
 </body>
 
 </html>
 [/CODE]

edid added a table to example

@sh1noauthorJun 26.2005 — #Thanks ill check it out ?

---

Hey I tried your code and it works well. Thanks alot.

I realized what my problem was.

I basically have a big table about 900x700.

In the TD I added an <IMG> tag to put a background image.

And then I had a table which was surrounded by a DIV and inside I have a mini <img> with a drop down select.

When I drag it around it slows down because of the img as the background and the content of it.

So I tried removing the <img> and replacing it by a td background and it seems ok.

Is there any way, to drag drop a table that has alot of content with much smoother results? Or it's not possible.

@vwphillipsJun 27.2005 — #should not matter whats in the box

@sh1noauthorJun 29.2005 — #should not matter whats in the box[/QUOTE]

<head>

<script type="text/javascript">

function init() {

document.getElementById('set-background').onmousedown = function(event) { zxcMseDown(event,this); }

}

function zxcMseDown(event,obj) {

document.onmousemove=function(event){zxcDrag(event);}

document.onmouseup=function(event){zxcMseUp(event);}

zxcObj=obj;

zxcMse(event);

zxcDragX=zxcMseX-zxcObj.offsetLeft;

zxcDragY=zxcMseY-zxcObj.offsetTop;

}

function zxcMseUp(event){

document.onmousemove=null; zxcDragX=-1; zxcDragY=-1;

// remove next 7 lines if docking not required

}

function zxcDrag(event){

zxcMse(event);

zxcObj.style.left=(zxcMseX-zxcDragX)+'px';

zxcObj.style.top=(zxcMseY-zxcDragY)+'px';

}

function zxcMse(event){

if(!event) var event=window.event;

if (document.all){ zxcMseX=event.clientX; zxcMseY=event.clientY; }

else {zxcMseX=event.pageX; zxcMseY=event.pageY; }

}

function zxcPos(zxc){

zxcObjLeft = zxc.offsetLeft;

zxcObjTop = zxc.offsetTop;

while(zxc.offsetParent!=null){

zxcObjParent=zxc.offsetParent;

zxcObjLeft+=zxcObjParent.offsetLeft;

zxcObjTop+=zxcObjParent.offsetTop;

zxc=zxcObjParent;

}

return [zxcObjLeft,zxcObjTop];

}

</script>

<body onload="init();">

<div id="set-background" class="hidden_div" style="position:absolute; left: 300; top: 200; border-style: solid; border-width: 1px 1px 1px 1px; border-color: #000000; background-color: #F1F1E6; filter:alpha(opacity=80); width: 250px;">

<table class="border" width="260px" cellpadding="0" cellspacing="0" border="0" bgcolor="#305693">

<tr>

<td width="100%">

<font color="white">Background settings</font>

</td>

<td align="right" style="margin-right: 1mm;">

<input type="button" value="X" style="height: 20px; width: 20px; font-size: 15; font-weight: bold;" onclick="toggle('set-background');">

</td>

</tr>

</table>

<table width="250px" cellpadding="0" cellspacing="0" border="0">

<tr>

<td align="center">

<form method="post">

<table class="border" style="margin-top: 2mm; margin-bottom: 1mm; margin-left: 1mm; margin-right: 1mm;">

<tr>

<td>

<u>Current image</u>

<br><img src="<?php echo "/members/$user/thumbs/$bg_thumb"; ?>" width="100" height="75" style="border-color: #000000; border-width: 1px;">

</td>

</tr>

<tr>

<td>

Background: 

<select name="background">

<option value="1">item 1</option>

<option value="1">item 2</option>

<option value="1">item 3</option>

<option value="1">item 4</option>

<option value="1">item 5</option>

</select>

</td>

</tr>

<tr>

<td align="right">

<input type="submit" value="Apply">

</td>

</tr>

</table>

</form>

</td>

</tr>

</table>

</div>

</body>

Here's my code. Is this ok? Test it in a php file and let me know if you see why the speed decreases or its normal. Thanks!

@vwphillipsJun 29.2005 — #the php changes the image name serverside

therefore php should make no difference

with html code for the image it seams to work fine.

however fast I move the mouse the panel follows

Also in #JavaScript _↴

Just Sharing: How to set an INPUT tag MAILTO value, using form field data Input type FILE...autocalculate and documenrt.getElementById Problem in combination

Success!

Help @sh1no spread the word by sharing this article on Twitter...

Tweet This

Drag and Drop problem.

21 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Drag and Drop problem.

21 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

21 Comments(s) _↴

Also in #JavaScript _↴