0

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

Harry
  • 87,580
  • 25
  • 202
  • 214
WJS
  • 31
  • 2
  • 5
  • Can you post the code, including the code for the drop. – Lazarus Aug 18 '09 at 15:22
  • It might be helpful to see your code. Your drag-drop code is altering the DOM, so its parent is likely going to change when it gets dragged around. – Jason Francis Aug 18 '09 at 15:23
  • if you want to add a line between the draggable and the dropable, please read my post on: http://stackoverflow.com/questions/536676 :) – balexandre Aug 19 '09 at 09:15
  • Does the problem occur only when you drag an element to a different container more than once? But it works correctly the first time? – drneel Dec 21 '12 at 21:07

1 Answers1

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.

Andy Gaskell
  • 31,495
  • 6
  • 74
  • 83
  • Thanks but actually I don't want to know where the lemons originally came from, but rather where they were at the start of each drag. I am aiming at a complete history of where the lemons have been dragged and dropped. – WJS Aug 19 '09 at 11:37