Jquery Ui Draggable Comment faire pour obtenir ID de div dragged commencé

Question

Je suis en faisant glisser et en déposant divs entre div diviseurs externes et besoin d'obtenir l'ID de la div extérieure que le drag a commencé po Je le fais en économisant $(this.parentNode).attr('id') dans l'événement de démarrage de la glissade.

La première fois que je fais glisser quelque chose, cela donne l'ID div attendu, mais sur les drags suivants de la même div cet ID n'est pas correct.

Des idées s'il vous plaît?

Voici le code:

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

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> 

</asp:Content> 

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
    <script type="text/javascript"> 

    $(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

Je vais commencer par dire qu'il est tard et je suis fatigué.

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" /> 
<%} %> 

Maintenant vos citrons de table et les citrons plat n'oublieront pas d'où ils venaient. Il pourrait y avoir de meilleurs moyens mais c'est tout pour moi - j'espère que c'est suffisant pour vous aider à démarrer.