Question

I am trying to note the position of a draggable div relative to its DOM parent. I have a global object g that contains another object bPos which is supposed to contain the position of div class = 'b' within div id ^= 'd'.

This is my code:

function() {
        var thisDiv = "";
        var thisDivID = "";
        $(".b").draggable({
            start: function(event, ui) {
                thisDiv = $(this).closest("div[id^='d']");
                thisDivID = thisDiv.attr("id");
                console.log(thisDivID); //also returning undefined

            },
            stop: function(event, ui) {
                var thisX = event.pageX;
                var thisY = event.pageY;
                var thisbPos = {
                    id: thisDivID,
                    x: thisX,
                    y: thisY
                }
                g.bPos[thisDivID] = thisbPos;
                console.log(thisDivID);// returning undefined
            }
        });
}

The console shows that thisDivID is undefined. Even if I assign an arbitrary value to it, it still comes up as undefined. Any help would be great.

Answer 1

Use the ‘drag:’ method instead.
I used this to allow list items to be dragged ‘out’ of the list with a little bit of resistance. Normally the y grid is set to a high number so it can’t move left and right, only up and down. In this code here, it’ll pop out and be free-moving after the user tries to move it to the left or right 127px.

Hopefully you get the idea from this code I had lying around:

drag: function (event, ui)
{
    var left = ui.offset.left; //Offset of the list item currently being dragged

    if (parseInt(left) > 127)
    {
        if (!overlay)
        {
            overlay = true;
            $(".li-unreachable").draggable("option", "grid", [1, 1]); //free-moving
            showOverlay();
        }
    } else
    {
        if (overlay)
        {
            hideOverlay();
            $(".li-unreachable").draggable("option", "grid", [300, 50000]); //y-axis more or less locked down
            overlay = false;
        }
    }

Edit: Let me know if you need some more code, I only grabbed the part that seemed relevant.

Edit 2: Thought I should point out as well, your code should work if you change “$(this)” to “ui”.

Edit 3: Here’s some code that’s more to the point:

$(".b").draggable({
    start: function(event, ui) {
        var x = ui.offset.left; //x coordinate of the object that is being dragged.
        var y = ui.offset.top; //y coordinate of the object that is being dragged.
        var elementBeingDragged = ui.item; // ui.helper would work too.
    },
    stop: function(event, ui) {
        var x = ui.offset.left; //x coordinate of the object that is being dragged.
        var y = ui.offset.top; //y coordinate of the object that is being dragged.
        var elementBeingDragged = ui.item; // ui.helper would work too.
    }
});