Jquery Ui Draggable How to get Id of div dragged started in

Question

I'm dragging and dropping divs between outer container divs and need to get the id of the outer div that the drag started in. I'm doing this by saving $(this.parentNode).attr('id') on the drag start event.

The first time I drag something this gives the expected div id but on subsequent drags of the same div this id is not correct.

Any ideas please?

Here is the code:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

    $(function() {
        var origleft;
        var origtop;
        var origZ;

        // Make lemons image draggable
        $("img.lemons").draggable({
               start: function(event, ui) {
               origleft = event.clientX;
               origtop = event.clientY;
               origZ = $(this.parentNode).attr('id');
               },
                cursor: "move"
            });

        // Make dish div droppable
        $("#dish").droppable({
            drop: function(event, ui) {
                saveDropDetails(ui.draggable.attr('id'), $(this).attr('id'), ui.absolutePosition.top, ui.absolutePosition.left, origleft, origtop, origZ);
            }
        });
        // Make table div droppable
        $("#table").droppable({
            drop: function(event, ui) {
                saveDropDetails(ui.draggable.attr('id'), $(this).attr('id'), ui.absolutePosition.top, ui.absolutePosition.left);
            }
        });
        });

    function saveCoords(left, top, dragId) {
        alert("{dragId is : '" + dragId + "',left is : '" + left + "',,top is : '" + top + "'}");
    }
    function saveDropDetails(dragId, dropId, dropPosTop, dropPosLeft, origleft, origtop, origZ) {
        alert("dragId is : " + dragId + ",dropId is : " + dropId + ",dropPosTop is : " + dropPosTop + ",dropPosLeft is : " + dropPosLeft + " origTop is " + origtop + " origLeft is " + origleft + " originZ is " + origZ);
    }
</script>

<h2>Drag and drop the lemons</h2>

    <div id = "table" style = "background-color:Blue">TABLE
          <%foreach (var aLem in Model.Table)    
          { %>
             <img id = "<%=aLem.LemonId %>", alt ="<%=string.Format("Lemon{0}", aLem.LemonId) %>" src="../../Images/extract.png" style ="padding-left:25px" class = "lemons" />

        <%} %>

    </div>
    <br />
    <br />
    <br />

    <div id = "dish" style = "background-color:Gray" >DISH
    <p></p>
          <%foreach (var aLem in Model.Dish)    
          { %>
             <img id = "<%=aLem.LemonId %>", alt ="<%=string.Format("Lemon{0}", aLem.LemonId) %>" src="../../Images/extract.png" style ="padding-left:25px" class = "lemons" />

        <%} %>

    </div>

Answer 1

I'll start off by saying it's late and I'm tired.

var tables = [], dishes = [];

<%foreach (var aLem in Model.Table)    
{ %>
  tables.push(<%= aLem.LemonId %>);
  <img id = "<%=aLem.LemonId %>", ... class = "lemons" />
<%} %>

<%foreach (var aLem in Model.Dish)    
{ %>
  dishes.push(<%= aLem.LemonId %>);
  <img id = "<%=aLem.LemonId %>", ... class = "lemons" />
<%} %>

Now your table lemons and dish lemons won't forget where they came from. There might be better ways but this is it for me - hopefully it's enough to get you started.