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

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

现在您的餐桌柠檬和菜柠檬不会忘记它们的来源。可能有更好的方法，但对我来说就是这样 - 希望它足以让你开始。