jquery sortable's absolutly positioned 'handle' problem- Doesn't influence the sorting while outsite of the sortable element scope

I got a problem I cannot manage to resolve.

I have a Basecamp alike list of items with a small menu on the left with Drag, Edit and Trash icons.

The handle is there. He is sitting outside of the scope of the sortable element, and this is why he doesn't influence the sorting at all.

As you can see, my dragging icon is on the left. He is outside of the {LI} scope. The LIs endings where t开发者_如何学Pythonhe char ends, so the Handle is out from his parent and wont influence at all the sorting and wont initiate it.

When I drag it but move my mouse inside the LI's borders, than it influencing and sorting like it suppose to.

What can I do. I broke my head and searched for an property of an handle offset, or any way to define for him that my handle is outside of your scope.

I hope anyone faced this thing in the past and might help :) I think to put a bullet image bg, and this way to give the LI more space to its left. Might do the trick... :)

Thank you

---

I was able to fix this by overwriting the method that determines if the cursor is over the element or not. Since my list was vertical like yours, I ripped out the checks for the horizontal position so that it only checks the vertical position. That way it doesn't matter where the cursor is horizontally.

Just put this after your main jquery.ui.js include and before your sortable code to overwrite the method:

// UI Fix for draggable
$.extend($['ui']['sortable'].prototype, {
    _intersectsWithPointer: function(item) {

        var isOverElementHeight = $.ui.isOverAxis(this.positionAbs.top + this.offset.click.top, item.top, item.height),
            verticalDirection = this._getDragVerticalDirection(),
            horizontalDirection = this._getDragHorizontalDirection();

        if (!isOverElementHeight)
            return false;

        return this.floating ?
            ( ((horizontalDirection && horizontalDirection == "right") || verticalDirection == "down") ? 2 : 1 )
            : ( verticalDirection && (verticalDirection == "down" ? 2 : 1) );

    }
});

Obviously this breaks functionality for horizontal sorting, so you'll only want to include it in your special case.

Dear jQuery UI Team: Call for feature to handle this using an option. :)

SammyK

---

I had this same issue.

I noticed there is a open bug submitted here: http://bugs.jqueryui.com/ticket/3022#comment:9

As well as a pull request that claims to fix the issue: https://github.com/jquery/jquery-ui/pull/915

It's a bit of a pain that it still hasn't been fixed yet after all these years.

Anyway, I was considering making a change like SammyK suggests, but then noticed that there is a axis option in v1.10.3. I'm not sure if this existed in previous jQuery UI releases.

But setting axis fixes the issue for me:

$('.items').sortable({
  containment:'parent',
  handle:'.move',
  opacity:0.5,
  axis:'y'
});

My handle can now reside outside of my draggable items, but still be able to drag the items up and down correctly.