• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 602
  • Last Modified:

Help with drap & drop script

I've been using a simple drag & drop script, and I've adjusted it to make it somewhat simpler, although now it doesn't work properly on IE or Firefox.  I'm not sure what's wrong with it, but the main problem is that you need to click an object twice in order to drag it. Also IE has some problem recognizing a mousedown event and causes the object to drag even after mouseup.

Here's the effect:

http://www.idcware.netfirms.com/test.html

The code is:

document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
var dragObject = null;
var mouseOffset = null;
var LPOS = null;

function mouseCoords(ev) {
      if(ev.pageX || ev.pageY) {
            return {x:ev.pageX, y:ev.pageY};
      }
      return {
            x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
            y:ev.clientY + document.body.scrollTop  - document.body.clientTop
      };
}

function getMouseOffset(target, ev) {
      ev = ev || window.event;

      var docPos = getPosition(target);
      var mousePos = mouseCoords(ev);
      return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

function getPosition(e) {
      var left = 0;
      var top  = 0;

      while (e.offsetParent) {
            left += e.offsetLeft;
            top  += e.offsetTop;
            e     = e.offsetParent;
      }

      left += e.offsetLeft;
      top  += e.offsetTop;

      return {x:left, y:top};
}

function mouseMove(ev) {
      ev = ev || window.event;
      var mpos = mouseCoords(ev);

      if(dragObject) {
            dragObject.style.top = mpos.y - mouseOffset.y;
            dragObject.style.left = mpos.x - mouseOffset.x;
      }
}      

function mouseUp(ev) {
      ev = ev || window.event;
      var mpos = mouseCoords(ev);

      if (dragObject) {
            dragObject = null;
      }
}

function makeDragObject(item) {
      LPOS = getPosition(item);
      item.onmousedown = function(ev) {
            dragObject = this;
            dragObject.style.position = "absolute";
            dragObject.style.top = LPOS.y;
            dragObject.style.left = LPOS.x;
      
            mouseOffset = getMouseOffset(this, ev);
            return false;
      }
}

0
chsalvia
Asked:
chsalvia
1 Solution
 
maclemaCommented:
Heres what was happening:

You had makeDragObject in the mouse down event of the image, makeDragObject assigned a function to the mouseDown event of the image. So what you really want is the makDragObject to only be called once, and then every other mousedown is the function that you assigned.

So what I did was put the makeDragObject in window.onload, and move `LPOS = getPosition(item);` inside the new onmousedown function.


Hope this helps,

Matt

Heres the html with javascript:

-------------------------
<html>
<head>
<link href="adstyle.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
var dragObject = null;
var mouseOffset = null;

var LPOS = null;
var adGrDropLocs = [];
var ADGRHEIGHT;
var ADGRWIDTH;

function mouseCoords(ev) {
      if(ev.pageX || ev.pageY) {
            return {x:ev.pageX, y:ev.pageY};
      }
      return {
            x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
            y:ev.clientY + document.body.scrollTop  - document.body.clientTop
      };
}

function getMouseOffset(target, ev) {
      ev = ev || window.event;

      var docPos = getPosition(target);
      var mousePos = mouseCoords(ev);
      return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

function getPosition(e) {
      var left = 0;
      var top  = 0;

      while (e.offsetParent) {
            left += e.offsetLeft;
            top  += e.offsetTop;
            e     = e.offsetParent;
      }

      left += e.offsetLeft;
      top  += e.offsetTop;

      return {x:left, y:top};
}

function mouseMove(ev) {
      ev = ev || window.event;
      var mpos = mouseCoords(ev);

      if(dragObject) {
            dragObject.style.top = mpos.y - mouseOffset.y;
            dragObject.style.left = mpos.x - mouseOffset.x;
      }
}      

function mouseUp(ev) {
      ev = ev || window.event;
      var mpos = mouseCoords(ev);

      if (dragObject) {
            dragObject = null;
      }
}

function makeDragObject(item)
{
      item.onmousedown = function(ev) {
            LPOS = getPosition(item);
            dragObject = this;
            dragObject.style.position = "absolute";
            dragObject.style.top = LPOS.y;
            dragObject.style.left = LPOS.x;
      
            mouseOffset = getMouseOffset(this, ev);
            return false;
      }
}

function init()
{
      makeDragObject(document.getElementById("ball1"));
}
window.onload = init;


</script>
</head>

<body>

<img src="ball.jpg" id="ball1" />

</body>
</html>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now