For one of my Javascript assignments, I was writing out Javascript for a drag-and-drop menu for an imaginary restaurant website. One problem I had was that when I was dragging items, the mouse would fall off the item I was dragging unless I moved the mouse very slowly.
Problem: Mouse falls off dragged item while dragging.
Impact: The drag-and-drop functionality is rendered useless because once you lose the item, it won't go back to the position it should be in and may end up off the browser window.
Solution:
The solution is very simple. Originally I had attached the function for dragging, dragItem(), to the item I was going to drag (in this case, list item <li>). The solution is to instead attach the dragging function to the document. Doing this, the mouse will never fall off the drag item.
So you can do some thing like this in your Javascript in your function that takes care of your onmousedown event:
document.onmousemove = dragItem;
So what you should have is:
function doThisWhenMouseDown()
{
... //your other code for this function
document.onmousemove = dragItem; //the function when dragging
document.onmouseup = drop; //function to perform when you drop the item
}
Now try dragging the item quickly. The mouse should stay on the item.
Sunday, April 01, 2012
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment