javascript - jQuery droppable/draggable 不应用 hoverClass(包括 codepen)

Question

我遇到的问题是我正在处理的一个更大的应用程序的一部分，但我已经在此代码笔中复制了一个无法工作的示例:

http://codepen.io/evanhobbs/pen/oEIKr/

简而言之，我有一个可以打开/关闭的侧边栏和其中的一个项目列表，我想使用 jquery 将其删除。在项目上拖动时，它应该应用 hoverClass(作为背景色)，以便用户知道要拖放的位置。我发现了几件事:

1. 如果在我开始拖动时侧边栏已经打开，它会完美地工作，即添加了 hoverClass。

2. 如果我做我想做的事情，即从侧边栏关闭开始，然后在用户开始拖动时打开侧边栏，则不会应用 hoverClass(尽管当我放下该项目时，下降会起作用)除非我拖动离开窗口然后先返回或拖到几乎边缘。如果我这样做，它就会起作用。

我试图弄清楚，但我对发生的事情一头雾水。我认为这与拖动时侧边栏的动画有关...

Answer 1

如果你仔细观察，我们仍然可以让它按原样工作，如果我们离开 droppable 区域然后回来，但那不是当我们尝试制作一个可用的界面时，我们想要。所以问题是，当我们开始拖动 droppable 时，似乎并不期望 draggable 已经悬停了。

对我们来说幸运的是，draggable 元素可以从 refreshPositions 选项开始，当设置为 true 时将计算每次鼠标移动的位置，按照文档:

http://api.jqueryui.com/draggable/#option-refreshPositions

If set to true, all droppable positions are calculated on every mousemove. Caution: This solves issues on highly dynamic pages, but dramatically decreases performance.

基本上我们需要做的是用这个选项启动draggable:

$('.drag-me').draggable({
    cursor: 'pointer',
    cursorAt: { top: 5, left: 0 },
    delay: 30,
    appendTo: 'body',
    helper: 'clone',
    start: openSidebar,
    stop: closeSidebar,
    refreshPositions: true //added line
});

更新的 CodePen:http://codepen.io/anon/pen/lmFuH