Drag and Drop??? 2

econnections · Apr 28, 2006

I need help with trying to move an object that I have initiated an onmousedown on.

The link below show the simple example I'm trying to get working. The test code is short and simple to follow.

When you open the page and initiate an onmousedown away from the image a variable is set which allow the clientY value to move the image using the ...style.top parameter.

However, when you onmousedown of the image it fails to track the cursor; its as if the is a event conflict??

I can't resolve the problem and would appreciate some help.

Many Thanks

http://www.global-office.co.uk/cfdocs/getting_started/my_app/Calander/Untitled-2.htm

theniteowl · Apr 28, 2006

It seems to work cleanly for me, I am using IE6.

There was a post earlier this week about a draggable object having trouble keeping up with the mouse also. His issue was due to iframes being on the page and when the mouse passed over the iframes it disrupted the dragging.

What browser are you using? Are you having trouble with the exact same code you link to above or is the linked code a simplified version?

It's hard to think outside the box when I'm trapped in a cubicle.

econnections · Apr 28, 2006

Hi, I'm using IE6, I didn't include any code NS as yet.

To see the problem you need to put the cursor on the image and hold down the left mouse button and try dragging the image vertically. You will get a 'can't do this' message and your cursor will come off the image.

As you move the cursor you will see its x/y coordinates on the status bar. When you generate an onmousedown on the image (keep the button down) and try to move it you will notice the x/y coordinate stop being updated?? This must give a clue to the problem but I can't spot it?

theniteowl · Apr 28, 2006

Nope, it works fine for me both on your posted site and when I run the code locally.

It's hard to think outside the box when I'm trapped in a cubicle.

theniteowl · Apr 28, 2006

Well, I gotta take that back. On YOUR site it does not work when I continue to hold down the mouse button but it does track without the button held after you click the icon the first time.

Testing your code locally it worked because I did not have the image on my PC, I just got the empty frame for it which worked fine. When I downloaded the image it broke the drag function. So it has something to do with the image object.
I tried wrapping the image in a DIV and setting the DIV as the object to move but that had no better effect.

It's hard to think outside the box when I'm trapped in a cubicle.

theniteowl · Apr 28, 2006

OK, found a solution.

Add this function to your script. Note that I moved your onmousemove and onmousedown lines in there also just to keep things neat.

Code:

function init() {
  document.onmousemove = ggg;
  document.onmousedown = ppp;
  document.onmousemove = ggg;
  document.body.ondrag = function () { return false; };
  document.body.onselectstart = function () { return false; };
}

Add a call to the function in your body tag.

Code:

<body onload="init();">

IE has a problem where while you drag an object it tries to do a text selection wherever you are dragging and I believe that event is canceling the other events. Adding those two lines should clear it up. Of course since they are set to document.body they will apply to everything else as well. If this becomes a problem you could always set them in another function and test if uu is 1.

It's hard to think outside the box when I'm trapped in a cubicle.

econnections · Apr 28, 2006

I've just tried this and it appears to work. I'm so please, I've now got the working building blocks to allow the object to all over the screen and to stop moving when the button is released.

As I begin to understand move about this I will be able to create slider bars and resize pictures.

Thank you very much for your time.

econnections · Apr 28, 2006

I've updated the link at the begining of the thead to include the x-axis and now the image can be dragged around the page as long as the onmousedown is active.

Your comment of the problem with text selection is very interesting and has held up this work for weeks.

I did a search on the Internet and found a very good article on how to solve the proble which you have done. I include it here, hoping it will be useful for other.

http://www.ditchnet.org/wp/2005/06/15/ajax-freakshow-drag-n-drop-events-2/

Thanks again.

theniteowl · Apr 28, 2006

I have some drag and drop code that works pretty well cross browser. It gets much more complex than what you have so far. I can dig it up Monday if you want to try it out.
It did not suffer from the same issue with the dragging but I have to look over the code to figure out why.

It's hard to think outside the box when I'm trapped in a cubicle.

econnections · Apr 29, 2006

I found quite a lot of examples on the web but the problem was I couldn't customise them because the were complicted or they used the parent/child model and I quickly bacome lot and frustrated.

What I've been able to do here with you help is start simple and build from that. This is the way I build most of my apps. Later I will make the code cross browser compatible but for now this is great and I've already built two good looking slider bars.

Many Thanks

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Drag and Drop??? 2

econnections

IS-IT--Management

theniteowl

Programmer

econnections

IS-IT--Management

theniteowl

Programmer

theniteowl

Programmer

theniteowl

Programmer

econnections

IS-IT--Management

econnections

IS-IT--Management

theniteowl

Programmer

econnections

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor