1

ドラッグされている要素 (クローン) がまだ「オーバー」しているときに「オーバー」イベントをトリガーすることは可能ですか? (マウス カーソルがまだ元の要素の境界内にある場合)?

この特定の動作が必要ですが、解決策が思いつきません。

4

1 に答える 1

0

over要素をドラッグしている間、jQuery UIのイベントが繰り返し発生します。ここで確認できます: 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()
        })
    }
});
于 2013-10-21T12:56:14.240 に答える