从可拖动元素中获取 ID 值答案

【问题标题】：Get ID value from draggable element从可拖动元素中获取 ID 值
【发布时间】：2011-12-02 00:25:23
【问题描述】：

我有以下代码：

$( init );

function init() {

 $(".Arrastrable").draggable({

stop: function(event, ui) {

    var pos = $(this).position();

    $("div#stop").text("Pos:  "+ pos.left + ", " + pos.top);
    }

});

}

在 HTML 中我有以下内容：

<body>

<div id="contenido" style="height: 400px;">
<form name="Registro" action="Guardar" method="post" id="Registro">
    <table
        <tr>
            <td>
                <div class="Arrastrable">
                    <img src="./css/Imagenes/mesa.png" id="mesa1"></img>
                </div>
                <div class="Arrastrable">
                    <img src="./css/Imagenes/mesa.png" id="mesa2"></img>
                </div>
            </td>
        </tr>
     </table>
</form>
</body>

我需要获取实际可拖动元素的 ID 值，我尝试使用$(ui.item).attr("id")，但没有成功。我不知道我是否必须添加其他方法或什么。

【问题讨论】：

标签： javascript draggable jquery-ui-draggable

【解决方案1】：

我不记得该属性是如何调用的，我会在 jsfiddle 中查找并在此处编辑，但您可以这样做：

 $(".Arrastrable").draggable({

stop: function(event, ui) {    
    var pos = $(this).position();

     console.dir(event); 
        console.dir(ui);

    $("div#stop").text("Pos:  "+ pos.left + ", " + pos.top);
    }

});

并检查 Google Web 开发者工具或 firebug 中的属性。

好的，检查here，你可以在控制台看到事件和ui对象的属性，在event.target.firstChild.id（或使用jQuery）中找到你要查找的属性

【讨论】：

【解决方案2】：

.draggable() 没有 ui.item。被拖动的元素是div.Arrastrable，它在您的代码中没有 id。如果您想要拖动图像的 id，请使用 $("img", this).attr("id")。

工作演示： http://jsfiddle.net/3dcSX/

$(init);
function init() {
    $(".Arrastrable").draggable({
        stop: function(event, ui) {
            var imgId = $("img", this).attr("id");
            var pos = $(this).position();
            $("#stop").text("Pos:  " + pos.left + ", " + pos.top + ". Id: " + imgId);
        }
    });
}

【讨论】：