1

所以我有两列，可拖动的，另一列带有可放置的。我让它按照我想要的方式工作，即当可拖动开始时，将容器滑到左边，显示可放置的列。

然而，当 droppable 列滑过时……除非你用力摇动可拖动的 droppables，否则 droppables 不会突出显示。

这是一个 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>
4

1 回答 1

0

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

根据 API（http://api.jqueryui.com/draggable/#option-refreshPositions）：

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

这是带有选项集的更新 JSFiddle：http: //jsfiddle.net/R2hMC/1/

于 2014-02-19T14:47:34.897 回答