1

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

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

4

1 回答 1

0

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

代码如下，这里是小提琴：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()
        })
    }
});
于 2013-10-21T12:56:14.240 回答