拖放元素时如何执行函数答案

【问题标题】：How to execute a function when an element is drag and dropped拖放元素时如何执行函数
【发布时间】：2011-04-27 02:49:17
【问题描述】：

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

【问题讨论】：

你说“我希望在第一次抓取对象时返回这个值（下一个对象的ID）” - 你所说的“下一个”对象是什么意思?当前被拖动的对象，还是当前拖动的对象将被拖放到的对象？如果是后者，您的代码将需要预测未来。
使<li>s 可排序但包括“结果放置在此处”区域的目的是什么？看起来您希望<li>s 可以仅拖动到“结果放置在此处”区域。那是对的吗？如果是这样，您不想使用sortable。
抱歉含糊不清。我的意思是结果 =“下一个对象的 ID”。如果您拖动
并重新排列它们，它将在该区域显示“下一个”