user2978643
user2978643

Reputation:

jQuery UI draggable and sortable - hard to sort

$("#source li").draggable({
    appendTo: "#destination",
    helper: "clone",
    connectToSortable: "#destination",
    containment: "document"
});

$("#destination").sortable({
    items: "li:not(.placeholder)",
    connectWith: "li",
    placeholder: "dragging-placeholder",
    sort: function() {
        $(this).removeClass("ui-state-default");
    },
    over: function() {
        $(".placeholder").hide();
    },
    out: function() {
        if ($(this).children(":not(.placeholder)").length === 0) {
            $(".placeholder").show();
        }
    }
});

JSFiddle: http://jsfiddle.net/j9FK5/7/

When I drag a few boxes from the source UL to the target, they become very hard to sort, especially when trying to move to the beginning. Regular sorting works with the same CSS.

I know it's a common problem, but none of the solutions worked in this particular case.

Upvotes: 2

Views: 672

Answers (1)

Irvin Dominin
Irvin Dominin

Reputation: 30993

You can change your tolerance option and set it to pointer.

Specifies which mode to use for testing whether the item being moved is hovering over another item. Possible values:

  • "intersect": The item overlaps the other item by at least 50%.

  • "pointer": The mouse pointer overlaps the other item.

Demo: http://jsfiddle.net/Fs772/

Upvotes: 2

Related Questions