jQuery UI的可拖動如何獲得DIV Id的拖累開始

我拖放外部容器div之間出現的div並需要得到外部的div的阻力在開始的ID。我通過保存這樣做$(this.parentNode).attr('id')上的拖動開始事件。jQuery UI的可拖動如何獲得DIV 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>

來源

2009-08-18 WJS

你可以發佈代碼，包括代碼的下降。 – Lazarus 2009-08-18 15:22:39

查看您的代碼可能會有幫助。您的拖放代碼正在改變DOM，所以它的父代可能會在被拖動時發生改變。 – 2009-08-18 15:23:52

如果你想在可拖動和可拖放之間添加一條線，請閱讀我的帖子：http://stackoverflow.com/questions/536676 :) – balexandre 2009-08-19 09:15:46

，我會說這晚，我累了開始。

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

現在你的桌子檸檬和菜檸檬不會忘記他們來自哪裏。可能有更好的方法，但這對我來說是 - 希望這足以讓你開始。

來源

2009-08-19 09:06:46

謝謝，但實際上我不想知道檸檬原來來自哪裏，而是他們在每次拖拽開始時的位置。我的目標是完成檸檬被拖放的歷史。 – WJS 2009-08-19 11:37:39

jQuery UI的可拖動如何獲得DIV Id的拖累開始

回答

相關問題