Question

I am using jQueryUI 1.8.14 and I would like to understand how to use helper methods related to a jQueryUI sortable list:

ui.helper - the current helper element (most often a clone of the item)
ui.position - current position of the helper
ui.offset - current absolute position of the helper
ui.item - the current dragged element
ui.placeholder - the placeholder (if you defined one)
ui.sender - the sortable where the item comes from (only exists if you move from one connected list to another)

For example, if I run the alert(ui.position) like the following

$jQ("#sortable").sortable({
  update: function(event, ui) {
    alert(ui.position)
  }
});

I get an alert message like this: “[object Object]“… how can I inspect that object (eg: in order to retrieve the position value – that is, an integer value)?

Answer 1

Use console.log on it, then you can see what the object contains 🙂

$("#sortable").sortable({
  update: function(event, ui) {
    alert("top:" + ui.position.top + " left:" + ui.position.left);
  }
});

Found this by doing: console.log(ui.position);

Result: Object { top=26, left=10}