jQuery可拖拽，不高亮显示，动画容器时可拖拽

Question

所以我有两列，可拖拽和另一个可拖拽。我已经让它按照我想要的方式工作了，当draggable开始时，将容器向左滑动，显示可拉放列。

然而，当可拉拽栏滑过…除非你用力摇动可拉拽栏，否则可拉拽栏不会高亮显示。

这里有一个jsFiddle来说明这个问题。

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>');
    }
    });
});

html

<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>

Answer 1

这个问题有点老了，但由于它没有一个公认的答案，这里是:将可拖动对象中的refreshPositions选项设置为true解决了这个问题。

根据API (http://api.jqueryui.com/draggable/#option-refreshPositions):

)

如果设置为true，则每次鼠标移动时计算所有可放置位置。注意:这可以解决高度动态页面上的问题，但会显著降低性能。

下面是更新后的JSFiddle的选项集:http://jsfiddle.net/R2hMC/1/