jQuery UI Droppable - 当元素结束时触发“over”事件？

Question

当拖动的元素（它的克隆）仍然“超过”时，是否也可以触发“over”事件？ （当鼠标光标仍在原始元素边界内时）？

我需要这种特定的行为，但无法提出任何解决方案。

Answer 1

jQuery UI中的over事件会在拖动元素时反复触发。你可以在这里看到：http://jsfiddle.net/yYKmw/12/。如果您仍希望在光标位于原始元素边界内时触发over事件，我们可以使用start事件最初触发它。这是有效的，因为当拖动开始时，光标必须在原始元素边界内（如何拖动元素？）。这适用于初始拖动，但是如果用户将元素移回其原始位置呢？我们可以通过在开始事件期间将占位符.index()附加到ui.item（克隆帮助程序）作为数据并在change上检查该数据来跟踪它。为避免重复代码，我们可以使用jQuery的.trigger()来触发可排序的over事件。

代码在下面，这里是小提琴：http://jsfiddle.net/yYKmw/11/

HTML

<ul  id="sortable">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<div id="output">
    <span></span>
</div>
<div id="test"></div>

CSS

#sortable { 
    list-style-type: none; 
    margin: 1em; 
    padding: 0; 
    width: 30%; 
    float: left;
}
#sortable li { 
    height: 20px; 
    background-color: khaki;
    margin: 3px;
    padding: 2px;
}
.sortable-placeholder {
    background-color: red !important;
}
#output {
    clear:both; 
    border: thin solid black; 
    height: 200px;
    width: 200px;
    color: black;
}

JS

$( "#sortable" ).sortable({
    placeholder: "sortable-placeholder",
    tolerance: "pointer",
    start: function(event, ui){
        $('#sortable').trigger('sortover');
        ui.item.data('startIndex', $('#sortable .sortable-placeholder').index());
    },
    change: function(event, ui){
        if ( $('#sortable .sortable-placeholder').index() === ui.item.data('startIndex') ) {
            $('#sortable').trigger('sortover');
        }
    },
    over: function(){
        //do something
        $('#output span').html('over fired').fadeOut(600, function(){
            $('#output span').html('').show()
        })
    }
});