How to get which div/ui.helper clicked in drag event jqueryui/jquery?

Question

On Jquery UI's site:

http://jqueryui.com/demos/draggable/

If I have:

<div id="someId" class="someClass">he</div>
<div id="otherId" class="otherClass">he2</div>

And:

$('#someid','#otherid').draggable({
    drag: function(event, ui) {
      alert(ui.helper.THEIDOFTHECLICKEDITEM); // What goes here?
    }
});

How do I get the id or class of the ID using the "ui" variable from the callback? If not possible, how do I get it from the "event" variable?

Answer 1

You want:

$("#someId, #otherId").draggable({
    drag: function(event, ui) {
        console.log(ui.helper[0].id);
    }
});

(or use ui.helper.attr("id") )

Note : ui.helper is a jQuery object, which is why we must either use .attr("...") to retrieve the id or access the matched element at index 0 and directly get the id.

---

Or without using the ui argument (probably what I'd recommend):

$("#someId, #otherId").draggable({
    drag: function(event, ui) {
        console.log(this.id); // "this" is the DOM element being dragged.
    }
});

Here's a working example: http://jsfiddle.net/andrewwhitaker/LkcSx/