我正在为模态使用 AngularJS 指令,以使它们可拖动。
This是指令。
在演示中,您可以清楚地看到,如果拖动它(尤其是左右拖动),它会比鼠标慢。我理解为什么会发生这种情况(JavaScript 计算相对于其起始位置的位置,因此在我的 1920x1080 屏幕中,它在 x 轴上从 -1200px 到 1920px)。我知道需要使用偏移量而不是位置,但经过多次尝试我未能做到这一点。
这是相关的 JavaScript 代码:
element.on('mousedown', function (event) {
// Prevent default dragging of selected content
event.preventDefault();
startX = event.screenX - x;
startY = event.screenY - y;
$document.on('mousemove', function mousemove(event) {
y = event.screenY - startY;
x = event.screenX - startX;
element.css({
top: y + 'px',
left: x + 'px'
});
});
});
如何让它依靠偏移量随鼠标移动而不变慢?
最佳答案
试试这个:http://plnkr.co/edit/QxIdGj 。我硬编码了 2 个值,你不应该这样做。您的“错误”是您将可拖动指令放入了错误的元素中。我将可拖动指令添加到 <div class="modal-content">
我认为这就是您想要移动的元素。
我还改变了你的element.css({
至
element.css({
top: event.clientY - 30 + 'px',
left: event.clientX - 10 + 'px'
});
它使用.clientX/Y,即鼠标的实际位置,无需进一步计算。
关于javascript - AngularJS - 可拖动 Bootstrap 模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34737774/