1

我有一个可拖动的 div #box能够在更大的#dashboard内移动，我只能通过另一个 div 看到它，比#window仪表板小

这是顺序：
<div id=’dashboard’&gt; <div id=’window’ > <div id=’box’ ></div> </div> </div>

我正在寻找的是在#box到达#window的边界时重新创建自动缩放运动。因此，在窗口 mouseleave（拖动时）我绑定了一个 setInterval，它开始向相反方向移动#dashboard。

我注意到可拖动的#box停止移动，因为用户在退出窗口时停止移动鼠标（当他按住它时）期望移动自行继续。

因此，我必须通过与#dashboard相对的运动来强制可拖动的#box位置，以使其明显静止并靠近边界。

这会在#box和鼠标位置（在#window之外）之间创建一个距离，当鼠标再次开始移动时，它会将#box从该位置拖动（太糟糕了！）。

为了避免这种情况，我决定在鼠标离开#window tiggering mouseup 时强制可拖动停止（我在论坛上阅读了这个并且它有效）。

现在我需要一种在鼠标重新进入#window时重新启动拖动的方法。我能怎么做？

更新：

我尝试用图像来解释这种情况：
在此处输入图像描述这里开始拖动，将框移到窗口外
在此处输入图像描述以滚动窗口，它必须开始向后移动（调用 setInterval()）
在此处输入图像描述移动窗口会导致框自身向后移动，因为它有绝对位置
在此处输入图像描述因此我必须将框重新定位在靠近窗口边框的位置，但这会导致框与窗口外的鼠标指针之间存在距离
在此处输入图像描述现在的问题：当再次移动鼠标并触发拖动事件时它“记住“与盒子的距离并神奇地移动它而不接触......

更新 2：

我创建了一个 jsFiddle 来显示所有代码：这里
要测试只是将#box移到右侧#window之外
，#dashboard将开始向后移动（停止它刚刚回到窗口内）。
不幸的是，发生了两件坏事：

  1. 它将在鼠标指针和框之间创建一个距离，当您移回窗口时，框将从该距离拖动
  2. 如果您继续将鼠标移到窗口外，该框将在其“拖动位置”和“边框校正”位置之间开始闪烁。

第二个问题可以避免$("#box").trigger("mouseup");在调用 setInterval 之前添加它，但它需要一种相反的功能，例如$("#box").trigger("mousedown");当鼠标重新进入窗口以再次触发拖动时，因此我的问题的标题。

4

1 回答 1

0

根据“<em>Nal”的建议，我暂时解决了（因为我仍然希望有更好的解决方案）：

  1. 当#box开始拖动时，它被替换为#clone ( display: noneon box)
  2. 拖动时，如果 #clone 在可见的#window内，则#clone将获取#box的ui.position
  3. 停止拖动#box将获得#clone并在移除 #clone时css('left')重新出现 ( display: block) 。
于 2012-09-16T10:24:29.530 回答