![](/img/trans.png)
[英]How can i apply a draggable directive to bootstrap modal using angularJS?
[英]AngularJS - draggable bootstrap modal
我对模态使用AngularJS指令,以使其可拖动。
这是指令。
在演示中,您可以清楚地看到,如果拖动它(尤其是向左和向右),它的速度比鼠标慢。 我知道为什么会发生这种情况(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">
中添加了draggable指令,我认为这是您要移动的元素。
我还更改了您的element.css({
element.css({
top: event.clientY - 30 + 'px',
left: event.clientX - 10 + 'px'
});
它使用的是.clientX / Y,它是鼠标的实际位置,无需进一步计算。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.