CODEWITHSUNDEEP
javascriptjquery
Evan Hobbs
Evan Hobbs

Reputation: 3672

jQuery droppable/draggable not applying hoverClass (includes codepen)

The issue I'm having is part of a larger app that I'm working on but I've replicated a non-working example in this codepen:

http://codepen.io/evanhobbs/pen/oEIKr/

In a nutshell I have a sidebar that can open/close and a list of items in it that I want to be droppable with jquery. When dragging over the items it should apply a hoverClass (as a background color) so the user knows where to drop. I've found a couple things:

  1. If the sidebar is already open when I start dragging it works perfectly, ie the hoverClass is added.

  2. If I do what I would like which is to start with the sidebar closed and open the sidebar when the user starts dragging, the hoverClass is not applied (though when I drop the item the drop works) UNLESS I drag off of the window and back first or drag to almost the edge. If I do this it works.

I'm tried to figure it out but I'm at a loss as to what's happening. I assume it has something to do with the sidebar animating out while dragging...

Upvotes: 4

Views: 1678

Answers (1)

G.Mendes
G.Mendes

Reputation: 1201

If you look closely, we can still make it work the way it is, IF we go out of the droppable area and come back, but that is not what we want when we try to make an usable interface. So the matter is that when we start to drag the droppable seems not to be expecting that the draggable will already be hovering.

Luckily for us, draggable elements can be started with refreshPositions option, which when set to true will calculate the position in every mouse move, following the docs:

http://api.jqueryui.com/draggable/#option-refreshPositions

If set to true, all droppable positions are calculated on every mousemove. Caution: This solves issues on highly dynamic pages, but dramatically decreases performance.

Basically what we need to do is start the draggable with this option:

$('.drag-me').draggable({
    cursor: 'pointer',
    cursorAt: { top: 5, left: 0 },
    delay: 30,
    appendTo: 'body',
    helper: 'clone',
    start: openSidebar,
    stop: closeSidebar,
    refreshPositions: true //added line
});

Updated CodePen: http://codepen.io/anon/pen/lmFuH

Upvotes: 3

Related Questions