无法在 jQuery 中获取可拖动 div 的 ID（使用 jQuery UI）答案

【问题标题】：Unable to get Id of draggable divs in jQuery (using jQuery UI)无法在 jQuery 中获取可拖动 div 的 ID（使用 jQuery UI）
【发布时间】：2009-04-11 19:15:18
【问题描述】：

由于某种原因，下面的脚本无法使用attr('id') 获取可拖动 div 的 id，但它适用于页面上的其他静态元素。我完全不明白为什么这不起作用，如果有人为我提供解决方案，我将不胜感激。

$(document).ready(function(){
    //$(".draggable").draggable();
    $(".draggable").draggable({ containment: '#container', scroll: false });
    $(".draggable").draggable({ stack: { group: '#container', min: 1 } });


    $("*", document.body).click(function (e) {
        var offset = $(this).offset();// get the offsets of the selected div
        e.stopPropagation();
        var theId = $(this).attr('id');// get the id of the selceted div
        $("#result").text(this.tagName + " id=" + theId + " (" + offset.left + "," + offset.top +")");
        $.post("http://localhost/index.php", "id=" + theId + "&x=" + offset.left + "&y=" + offset.top); //post x,y to php (and the id of the elemnt)
    });

    var req = function () {
        $.ajax({
            url: "out.php",
            cache: false,
            success: function(html){
                $("#stuff").empty().append(html);
                var css_attr = html.split(",");
                $('#1').css('left', css_attr[0] + 'px').css('top', css_attr[1] + 'px');
            },
            complete: function(){
                req();
            }
        });
    };
    req();
});

注意：此脚本依赖于以下 JavaScript 源代码。

【问题讨论】：

标签： php javascript jquery html

【解决方案1】：

目前，您正在使用* 将点击处理程序附加到 DOM 中的所有元素（非常非常糟糕，不要这样做！)，包括那些可拖动项中的任何子项。

您正确地使用.stopPropagation() 阻止事件冒泡，但它可能是您单击的.draggable 的子，而不是可拖动对象本身。你想要的实际上是监听 .draggable 元素本身，像这样：

$(".draggable").click(function (e) {
    var offset = $(this).offset(), 
        theId = this.id;
    e.stopPropagation();
    $("#result").text(this.tagName + " id=" + theId + " (" + offset.left + "," + offset.top +")");
    $.post("http://localhost/index.php", { id: theId, x: offset.left, y: offset.top });
});

这里的其他更改是 id 可以通过 this.id 直接访问，并且将对象传递给 $.post() 对于序列化来说更安全，就像我上面所说的那样。

即使上面的内容还不是相当，您可能希望在停止拖动时发送位置，方法是更改以下内容：

$(".draggable").click(function (e) {

到这里：

$(".draggable").bind("dragstop", function (e) {

...或在较新版本的 jQuery (1.4.2+) 中：

$(document.body).delegate(".draggable", "dragstop", function (e) {

【讨论】：

【解决方案2】：

您的点击功能在测试页面上对我有用。出于好奇，如果将 'e.stopPropogation()' 行移到 click 函数的底部，它的行为会有所不同吗？

【讨论】：

我移动了传播函数，它的工作原理是一样的。点击功能也适用于某些元素，但不适用于可以拖动的元素。

【解决方案3】：

小心使用 *，你知道，all 意味着 all，如果你有 <div><p><span><a></a></span></p></div> 这意味着动作被设置到每一个元素。我会指定应该受你的函数影响的类或标签，以确保你得到你想要被点击的东西。

尝试将您的代码替换为您认为它的 ID 未得到的对象，看看它是否有效..

【讨论】：

我用div替换了，问题依旧。

【解决方案4】：

这似乎很明显，但您确定您选择的所有元素实际上都有 ID。如果您包含所有内容（带有 *），那么很可能某些元素没有 ID。

【讨论】：