jQuery UI的可拖动如何获得DIV Id的拖累开始

Question

我拖放外部容器div之间出现的div并需要得到外部的div的阻力在开始的ID。 我通过保存这样做$(this.parentNode).attr('id')上的拖动开始事件。

我第一次拖动的东西，这给出了预期的div id，但在同一div的后续拖动此id是不正确的。

有什么想法吗？

下面是代码：

<%@ 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

，我会说这晚，我累了开始。

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

现在你的桌子柠檬和菜柠檬不会忘记他们来自哪里。可能有更好的方法，但这对我来说是 - 希望这足以让你开始。