拖放元素時如何執行功能

Question

我有一個基本的jquery / javascript問題。

下面的代碼將創建可以拖放的對象。 如果單擊一個對象，它將顯示“下一個”對象的ID。

我希望在第一次“抓取”（沒有刻意單擊的情況下選中）對象時返回（下一個對象的ID的）此值，然后返回放置它的“下一個”對象的ID。

理想情況下，如果它被抓取的位置的ID等於放置它的位置，則它不應返回任何ID。

jQuery和Javascript

$(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
});

$("li").live("click",function(e) {
    document.getElementById("result").innerHTML=($(this).next("li").attr('id'))
});

CSS：

#sortable { list-style-type: none; margin: 0; padding: 0; }
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
</style>

HTML：

<div class="container">

<ul id="sortable">
    <li id="li1" class="ui-state-default">1</li>
    <li id="li2" class="ui-state-default">2</li>
    <li id="li3" class="ui-state-default">3</li>
    <li id="li4" class="ui-state-default">4</li>
    <li id="li5" class="ui-state-default">5</li>
    <li id="li6" class="ui-state-default">6</li>
</ul>

</div>

<br><div id="result">Result Placed Here</div>

我什至不知道從哪里開始，因為我不知道如何在不單擊功能的情況下運行該功能（不進行抓取）。

任何幫助是極大的贊賞，

泰勒

可以在這里找到JSfiddle： http : //jsfiddle.net/TSM_mac/uuHsg/4/

Answer 1

使用可排序事件 start和stop 。

$(function() {
    function startCallback(event, ui) {
        // stuff
    }

    function stopCallback(event, ui) {
        // other stuff
    }

    $("#sortable").sortable({
        start: startCallback,
        stop: stopCallback
    }).disableSelection();
});