Question

我的问题类似于以下链接

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

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

当删除列表项时，我需要获取'id'属性，然后将其传递给'submit'上的php，以更新数据库。

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

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

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

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

由于

下面是我的代码

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);
}

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

1 个答案: