设置容器动画时，jQuery可拖动无高亮显示可拖放

所以我有两列，一列是可拖动的，另一列是可拖放的。我已经让它按照我想要的方式工作，也就是说，当Dragable开始时，将容器向左滑动，显示Dropable列

但是，当可拖放列滑过时……除非您用力摇晃可拖放列，否则可拖放列不会突出显示

javascript

$('#first_list > ul > li').draggable({
    revert:true,
    helper:  function () {
        var helper = $('<div class="helper">' + $(this).clone().html() + '</div>');
        return helper.appendTo('body').css({'zIndex':5});
    },
    start:function(event,ui) {
        $('#inner-container').animate({left:'-200px'},'fast');
    },
    stop:function(event,ui) {
        $('#inner-container').animate({left:'0'},'fast');
    }
});

$('#second_list li').droppable({
    hoverClass:'active_drop',
    drop:function(event,ui) {
        $('#result_list').append('<li>' + ui.helper.text() + ' on ' + $(this).text() + '</li>');
    }
    });
});

$（'first_list>ul>li'）。可拖动({
回复：对，
助手：函数（）{
var helper=$（''+$（this.clone（）.html（）+''）；
返回helper.appendTo（'body'）.css（{'zIndex'：5}）；
},
开始：功能（事件、用户界面）{
$（“#内部容器”）.animate（{left:'-200px'}，'fast'）；
},
停止：功能（事件、用户界面）{
$（“#内部容器”）.animate（{left:'0'}，'fast'）；
}
});
$（“#第二个列表li”）。可拖放({
hoverClass:“主动放置”，
drop：函数（事件、用户界面）{
$（“#结果列表”）.append（“
”+ui.helper.text（）+”在“+$（this.text（）+”
”）上）；
}
});
});

html

首先
第二
第三
第四


首先
第二
第三
第四

这个问题有点老了，但由于没有公认的答案，下面是：将可拖动对象中的

refreshPositions

选项设置为

true

解决了这个问题

根据API（）：

如果设置为

true

，则会在每个鼠标移动时计算所有可拖放位置。注意：这可以解决高度动态页面上的问题，但会显著降低性能

---

下面是一个更新的JSFIDLE，选项设置为：

谢谢，有时候我希望自己能识字。

<div id="container">
<div id="inner-container">
    <div class="column" id="first_list">
        <ul>
            <li><span></span> First</li>
            <li><span></span> Second</li>
            <li><span></span> Third</li>
            <li><span></span> Fourth</li>
        </ul>
    </div>
    <div class="column" id="second_list">
        <ul>
            <li><span></span> First</li>
            <li><span></span> Second</li>
            <li><span></span> Third</li>
            <li><span></span> Fourth</li>
            </ul>
        </div>
    </div>
</div>
<ul id="result_list"></ul>