Question

标题可能有点混乱，我会解释。我用jQuery创建了一个可拖动的div（不是jQuery UI的draggable）。这是代码：

let target = null;

this.el.on('mousedown', (ev) => {
    target = this.el;
}).on('mouseup', (ev) => {
    target = null;
});

$(document.body).on('mousemove', 'div', (ev) => {
    if(target) {
        this.x = ev.pageX;
        this.y = ev.pageY;

        this.update(); // update css
    }
});

代码很简单，效果很好。问题是当我从中心或任何地方拖动时，不是左上角，元素始终跟随光标的协调，因此始终将元素的顶部放置在我拖动的位置。是的，这是正确的，因为这就是我所做的，但我想从我拖动的位置移动元素。

很难解释，所以我会给出更简单的一个。如果（0,0）中有一个方框（div）且大小为5x5，并通过单击（0,0）到（10,10）移动方框，则其目的地应为（10,10）。但如果我通过拖动（2.5,2.5）到（10,10）移动框，目的地必须是（12.5,12.5），而不是（10,10）。

但在我的代码中，目的地是（10,10），而不是（12.5,12.5），因为点击点的偏移不适用于翻译。

如果您仍然不明白我的问题，请参阅jquery-ui's draggable example。这就是我想要做的。

我知道这是什么问题，但我所有的尝试都行不通，所以我在这里需要一些帮助。任何建议都将非常感谢！

示例是here！

Answer 1

只需将offsetX事件中的offsetY和mousedown值添加到您的计算中，方法是从pageX和pageY中减去mousemove和$(document).ready(function() { function DraggableElement() { this.x = 0; this.y = 0; this.width = 100; this.height = 100; this.el = $('<div></div>') .addClass('box') .appendTo($('#playground')); this.update(); var self = this; var target = null; var offsetX = 0; var offsetY = 0; this.el.on('mousedown', function(ev) { offsetX = ev.offsetX; offsetY = ev.offsetY; target = self.el; }).on('mouseup', function() { target = null; }); $(document.body).on('mousemove', 'div', function(ev) { if(target) { self.x = ev.pageX - offsetX; self.y = ev.pageY - offsetY; self.update(); } }); } DraggableElement.prototype.update = function() { this.el.css({ top: this.y + 'px', left: this.x + 'px', width: this.width + 'px', height: this.height + 'px' }) }; var el = new DraggableElement(); }); 1}}处理程序。

* {
  padding: 0;
  margin: 0;
}
#playground {
  background-color: #eee;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.box {
  position: absolute;
  background-color: red;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="playground"></div>

{{1}}

使用jQuery拖拽div，如何应用元素的点击偏移量？

1 个答案: