JQuery droppable，当列表项被删除时，无法使用 attr() 获取 'id' 属性

Question

我的问题类似于下面的链接

How to get the dropped item's id on drop event jquery

但是我拖放一个列表项，每个都包含图像。

当列表项被删除时，我需要获取“id”属性，然后在“提交”时将其传递给 php，以更新数据库。

但是下面的代码似乎没有捕获'id'属性或者如果我尝试'src'，我已经修改了以下内容

$("#drop").text(id); to $("#drop").text("image has been dropped");

在放置事件时确实显示正确，“图像已被删除”，所以问题似乎在于在列表项中获取“id”属性？我尝试添加一个名为“图像”的类来代替列表项，尝试了很多东西，但没有任何区别！

希望有人能指出我正确的方向！

谢谢

下面是我的代码

jQuery

$(document).ready(function() {

    $("#item-slider li").draggable({
        containment: 'document',
        revert: true,
        helper: "clone",
        cursor: "move"
    });


    $("#drop").droppable({
        accept: "#item-slider li",
        drop: function (event, ui){
            var draggable = ui.draggable;
            var id = draggable.attr("id");
            $("#drop").text(id);
        }
    });

});

HTML

<div id="item-slider">
<ul>
    <li class='image'><img src="./images/jeans1.jpeg" id="jeans1.jpeg" /></li>
    <li class='image'><img src="./images/top2.jpg" id="top2.jpg" /></li>
    <li class='image'><img src="./images/top1.jpg" id="top1.jpg" /></li>
    <li class='image'><img src="./images/shoes3.jpg" id="shoes3.jpg" /></li>
    <li class='image'><img src="./images/dress1.jpg" id="dress1.jpg" /></li>
</ul>

<div id="drop">
</div>
</div>

Answer 1

您要查找的id 属性不属于您的<div> 元素，而是属于它们的<img> 子元素。您可以将这些元素与find() 或children() 匹配：

drop: function(event, ui) {
    var id = ui.draggable.find("img").attr("id");
    $("#drop").text(id);
}