如何在拖放元素时执行函数

How to execute a function when an element is drag and dropped

本文关键字：执行 函数 元素 拖放      更新时间：2023-09-26

我有一个基本的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/

使用可排序的事件start和stop 

$(function() {
    function startCallback(event, ui) {
        // stuff
    }
    function stopCallback(event, ui) {
        // other stuff
    }
    $("#sortable").sortable({
        start: startCallback,
        stop: stopCallback
    }).disableSelection();
});
相关文章：