All geek questions in one place

JQuery droppable / draggable not using hoverClass (including codepen)

The problem I am facing is part of a larger application that I am working on, but I reproduced a non-working example in this codec:

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

In a nutshell, I have a sidebar that can open / close and a list of elements in it that I want to remove using jquery. When dragging items, it must use hoverClass (as background color) so that the user knows where to drop it. I found a couple of things:

  • If the sidebar is already open, when I start dragging it, it works fine, that is, hoverClass is added.

  • If I do what I would like to start with a closed side panel and open the side panel when the user starts dragging, hoverClass is not applied (although when I delete an item that works drop) IF I do not drag turn off the window and go back or drag to the edge. If I do this, it will work.

I am trying to figure this out, but I do not understand what is going on. I guess this has something to do with sidebar animating when dragging and dropping ...

+4
source share
1 answer

, , , IF, droppable , , , . , droppable, , , draggable .

draggable refreshPositions, true , :

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

true, MouseMove. : , .

draggable :

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

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

+3

Source: https://habr.com/ru/post/1538654/

More articles:


All Articles