javascript中的单击并拖动功能答案

【问题标题】：Click And Drag function in javascriptjavascript中的单击并拖动功能
【发布时间】：2015-08-17 19:51:22
【问题描述】：

我正在尝试在不使用 jquery 的情况下在 JavaScript 中创建自己的单击和拖动功能。我知道 jquery 很容易实现，但我更喜欢我自己的代码。我所拥有的，当我单击 div，然后移动鼠标时，div 移动到同一个位置并且没有实现“拖动”外观。我不确定这是为什么。我希望我的结果能够将 div 移动到图像上，这样我就可以根据 div 等“裁剪”图像。我的代码是：

index.js

function _(element) {
  return document.getElementById(element);
}

index.css

body {
  background-color: rgb(33, 66, 99);
  margin: 0px;
  padding: 0px;
}

img {
  position:absolute;
}

.selection {
  width: 200px;
  height: 200px;
  background-color: rgb(255,255,255);
  position: absolute;
}

index.php

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "UTF-8"/>
    <title>Image Cropping</title>
    <link rel = "stylesheet" href = "index.css"/>
    <script src = "index.js"></script>
  </head>
  <body>
    <div class = "image">
      <img src = "model.jpg" alt = "Model" id = "theImage"/>
      <div class = "selection" id = "selection"/>
    </div>
    <script>
      _("theImage").ondragstart = function() { return false; };
      var m = _("selection");
      m.addEventListener("mousedown", mouseDown, false);
      window.addEventListener("mouseup", mouseUp, false);

      function mouseUp() {
        window.removeEventListener("mousemove", move, true);
      }

      function mouseDown(e) {
        window.addEventListener("mousemove", move, true);
      }

      function move(e) {
        var x = m.style.left;
        var y = m.style.top;

        var mouseX = e.clientX;
        var mouseY = e.clientY;

        m.style.top += (mouseX - x) + "px";
        m.style.left += (mouseY - y) + "px";

        // Also tried: m.style.top = (mouseX - x) + "px";
        // And       : m.style.left = (mouseY - y) + "px";
      }
    </script>
  </body>
</html>

【问题讨论】：

试试 Chuck Norris 的方式 -- how to implement a drag-and-drop div from scratch?

标签： javascript click drag

【解决方案1】：

要添加“拖动外观”，您可以：

更改光标 (cursor: move;)
保持光标相对于鼠标的偏移

对于第二个，我重用了我为我的一个项目创建的函数，为此我为移动设备实现了拖放，不想使用大库：

/*
 * Returns the given element's offset relative to the document.
 */
function realOffset(elem) {
    var top = 0, left = 0;
    while (elem) {
        top = top + parseInt(elem.offsetTop, 10);
        left = left + parseInt(elem.offsetLeft, 10);
        elem = elem.offsetParent;
    }
    return { top: top, left: left };
}

使用这个函数，数学就变得简单了：

m.style.left = (mouseX - offset.left) + "px";
m.style.top  = (mouseY - offset.top) + "px";

完整演示

_("theImage").ondragstart = function () { return false; };

var m = _("selection"), offset;
m.addEventListener("mousedown", mouseDown, false);
window.addEventListener("mouseup", mouseUp, false);

function mouseUp() { window.removeEventListener("mousemove", move, true); }

function mouseDown(e) {
    // SAVE THE OFFSET HERE
    offset = {
    	left: e.pageX - realOffset(m).left,
        top: e.pageY - realOffset(m).top
    };
    window.addEventListener("mousemove", move, true);
}

function move(e) {
    // REUSE THE OFFSET HERE
    m.style.left  = (e.pageX - offset.left) + "px";
    m.style.top = (e.pageY - offset.top) + "px";
}

/*
 * Returns the given element's offset relative to the document.
 */
function realOffset(elem) {
    var top = 0, left = 0;
    while (elem) {
        top = top + parseInt(elem.offsetTop, 10);
        left = left + parseInt(elem.offsetLeft, 10);
        elem = elem.offsetParent;
    }
    return { top: top, left: left };
}

function _(element) { return document.getElementById(element); }

body {
  background-color: rgb(33, 66, 99);
  margin: 0px;
  padding: 0px;
}

img {
  position:absolute;
}

.selection {
  width: 200px;
  height: 200px;
  background-color: rgba(255,255,255,.5);
  position: absolute;
  cursor: move;
}

<div class="image">
    <img src="http://i.imgur.com/vxkljMP.jpg" alt="Model" id="theImage" />
    <div class="selection" id="selection"></div>
</div>

【讨论】：