Question

所以我有两个专栏，draggables和另一个有droppables的专栏。我按照我想要的方式工作，这是在可拖动开始时，将容器向左滑动，显示可放置的列。

然而，当可放置的列滑过时...除非你剧烈摇动可拖动的，否则droppables不会突出显示。

Here's a jsFiddle to illustrate the issue.

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

jQuery draggable在动画容器时没有突出显示可放置

1 个答案: