Hide sortable placeholder when droppable hoverClass is triggered

Question

I have built my own nested ul-tree menu. The tree li-items are sortable, even in several levels using jQuery sortable() and droppable(). You just drag-n'-drop.

So, my problem now is that both "sortable() placeholder" and "droppable() hoverClass" are highlighted when dragging a item over the other items droppable()'s zones.

Here are my current code:

http://jsfiddle.net/PeterWesterlund/8KDur/89/

The question: How do I get the sortable placeholder to not be highlighted when the droppable() hover is triggered?

So only the place where the selected item will be placed are highlighted.

Answer 1

I'm not certain I understand completely what you are asking but by using the property:tolerance: "fit" you can set different tolerances for how the drop is handled.

JSFiddle

Here is a list of possible options:

Tolerance

Specifies which mode to use for testing whether a draggable is 'over' a droppable. Possible values: 'fit', 'intersect', 'pointer', 'touch'.

fit: draggable overlaps the droppable entirely intersect: draggable overlaps the droppable at least 50% pointer: mouse pointer overlaps the droppable touch: draggable overlaps the droppable any amount

Code examples

Initialize a droppable with the tolerance option specified. $( ".selector" ).droppable({ tolerance: "fit" }); Get or set the tolerance option, after init.

//getter

var tolerance = $( ".selector" ).droppable( "option", "tolerance" );

//setter

$( ".selector" ).droppable( "option", "tolerance", "fit" );

More information can be found here under options.

Answer 2

I am experiencing this problem now, and I made this gif to illustrate:

It’s really annoying how the placeholder won’t go away when dragging above the first connected Sortable (and probably also below the last one), but I think it’s by design. If I release the dragged item on the Droppable in the top, it will visually end up as the first item in the Culture section, but programmatically it will be set to Issue Cover and revert to its original position in the People section.

Hiding the placeholder using CSS, or removing it using JS, only creates an offset that isn’t even corrected using hacks, like tapping into jQUI’s internals: $.ui.ddmanager.prepareOffsets($.ui.ddmanager.current, null);

Answer 3

The solution is, put this in your sortable option list:

refreshPositions: true

Now you dont have to hide anything anymore!

Answer 4

had exactly the same problem. my solution is

Sortable

$(".scrollPane", ui).sortable({
    //...
    placeholder: "ui-state-highlight myPlaceholder"
})

Droppable

$( container ).droppable({
    //...
    over: function( event, ui ){
        $(this).parent().addClass("hide-placeholder")
    },
    out: function( event, ui ){
        $(this).parent().removeClass("hide-placeholder")
    }
})

CSS(less)

.hide-placeholder{
    .myPlaceholder {
        visibility:hidden;/*display:none*/
    }
}

wished there was some kind of integration/communication between these different d&d concepts too.