Question

使用Javascript，我想使用事件拖动重新定位对象。

跟踪鼠标移动的距离是在放弃之前获取对象位置的唯一方法吗？

在这个例子中，没有“放置位置”，因为我只是根据用户拖动鼠标的位置更新对象的位置。

谢谢！

Answer 1

跨浏览器兼容性是一个问题，所以代码有点时髦。此代码适用于任何浏览器。

这是基于mouseup事件。
您可以使用mousemove事件。

如果事件监听器被添加到窗口中，它将无法在IE8和之前工作。

<!DOCTYPE html><html lang="en"><head><title>Floor Plan</title>
<style type="text/css">
#page{width:100%;padding:0;}
</style>
<body><div id="page" onmouseup="fpos(event)">
</div></body></html>
EOT;
ob_flush();
echo <<<EOT
<script type="text/javascript">//<![CDATA[
var fp = document.getElementById('fp');
var ptr = document.getElementById('point');
function fpos(e) {
  var x = 0;
  var y = 0;
  e = e || window.event;
  if (e.pageX || e.pageY){
    x = e.pageX;
    y = e.pageY;
  }
  else if (e.clientX || e.clientY)   {
    x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
    y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
  }
  var offSet = findPos(fp);
  x -=  offSet[0];
  y -=  offSet[1];
  find(x,y);
}
function findPos(obj) {
var currentLeft = currentTop = 0;
if (obj.offsetParent) {
do {
  currentLeft += obj.offsetLeft;
  currentTop += obj.offsetTop;
} while (obj = obj.offsetParent);
return [currentLeft,currentTop];
}}

在放下之前找到拖动对象的位置

1 个答案: