Question

My problem is similar to the below link

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

However I am dragging and dropping a list item, each contain images.

When the list item is dropped, I need to get the ‘id’ attribute, which will then be passed to php on ‘submit’, to update the database.

But the below code does not seem to be capturing the ‘id’ attribute or if i try ‘src’, I have amended the following

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

which does display correctly, “image has been dropped” upon a drop event, so the problem seems to be with getting the ‘id’ attribute within a list item? I tried adding a class called ‘image’ to use instead of the list item, tried many things, but makes no difference!

Hope someone can point me in the right direction!

Thanks

below is my code

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

The id attributes you’re looking for do not belong to your <div> elements, but to their <img> children. You can match these elements with find() or children():

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