Question

I have a vertical <ul> list with items that have jQuery’s draggable event handling attached. When any list item is dragged, all list items are to be dragged along and rendered while dragging.

Problem: My helper function renders the dragged items in an incorrect vertical position unless the topmost list item is the dragged one (i.e. clicked and dragged with mouse button). This is because I don’t know the vertical position of the dragged item. If I knew that, I could set the cursorAt top property to offset this.

Pseudo code:

$(list items).draggable({
    cursorAt: {
       cursor: "crosshair",
       left: 5,
       top: ? // need to know vertical position of dragged item here...
    },

So my question is, is there any way to find the vertical position of the dragged item?

Answer 1

Tried a number of things to get the click position into top attribute, but it wouldn’t work.

So I came up with a workaround. Instead of offsetting the draggables with cursorAt, I used a CSS hack (using margin-top) to move the stuff which is rendered when dragging (set by helper function):

 helper: function(e, ui) {
        var compensateUp = e.pageY;
        var helperHtml='<ul style="margin-top:-' + compensateUp + 'px;">';
        ...

Works like a charm in all major browsers.