[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 595
  • 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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

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