Question

我遇到的问题是我正在开发的一个更大的应用程序的一部分，但我在这个代码中复制了一个非工作的例子：

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

简而言之，我有一个可以打开/关闭的侧边栏，以及我希望可以使用jquery删除的项目列表。当拖动项目时，它应该应用hoverClass（作为背景颜色），以便用户知道放下的位置。我找到了几件事：

如果我开始拖动时侧边栏已经打开，它就可以正常工作，即添加了hoverClass。
如果我按照我想要的方式开始边栏关闭并在用户开始拖动时打开侧边栏，则不应用hoverClass（尽管当我放下项目时，拖放工作）除非我拖动离开窗户并先退回或几乎拖到边缘。如果我这样做就行了。

我试图解决这个问题，但我不知道发生了什么。我认为这与侧边栏动画有关，同时拖动......

Answer 1

如果仔细观察，我们仍然可以按原样使用它， IF 我们走出droppable区域然后回来，但这不是我们想要的我们试图建立一个可用的界面。所以问题在于，当我们开始拖动droppable似乎并不期望draggable已经在徘徊。

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

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

如果设置为true，则计算所有可放置的位置鼠标移动。 警告：这解决了高动态页面上的问题，但是大大降低了性能。

基本上我们需要做的是使用此选项启动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

jQuery droppable / draggable不应用hoverClass（包括codepen）

1 个答案: