ChiHungLam / gwtquery-plugins

Automatically exported from code.google.com/p/gwtquery-plugins
0 stars 0 forks source link

Bug in droppable and draggable combined together in hierarchy #46

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago
What steps will reproduce the problem?
I have a hierarchy of widgets. Every panel is draggable and droppable:
Almost everything works:
You can drag every panel to parent panel or change position between siblings 
panels.

But If panel is in hierarchy like on attached picture: 

Main -> 1 -> 9 -> 10 -> 11 | 12 | 13

Test scenario:
[WORKS] 1. Drag panel number 10 to parent or siblings and drop.
[WORKS] 2. Drag panel number 14 into panel number 10 and drop.
[!NOT WORKS] 3. Then when I try to drag panel number 10 to parents it does not 
work, droppable panels not receive events (over, drop etc...)
What is interesting when I drag panel number 10 to sibling (NOT TO PARENT) then 
it start to work again and I can drag to parents and then parents panels get: 
[overEvent, dropEvent etc].

Another scenario to clarify:
[WORKS] 1. Move (drag and drop) panel number 11 after panel 12 - in effect 
panel number 10 -> 12 | 11 | 13
[!NOT WORKS] 2. After first step I can't drag and drop panel number 10 to 
parents for example to panel number 1 or Main until I drag (without drop) panel 
number 10 over panel number 14 if I do that everything start work again.

I'm using droppableOptions.setGreedy(true); option and I tried a lot of things 
similar to:
DragAndDropManager.getInstance().update();

What version of the product are you using? On what operating system?
Windows 7, gwtquery-1.2.0.jar, gquery-dnd-bundle-1.0.6.jar

Original issue reported on code.google.com by gento...@gmail.com on 15 Jan 2013 at 7:04

Attachments:

GoogleCodeExporter commented 9 years ago
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import gwtquery.plugins.draggable.client.gwt.DraggableWidget;
import gwtquery.plugins.droppable.client.gwt.DroppableWidget;

public class Main implements EntryPoint {

    public void onModuleLoad() {

        DraggableWidget<DroppableWidget> draggableNo1 = createDraggable("1");
        DraggableWidget<DroppableWidget> draggableNo2 = createDraggable("2");
        DraggableWidget<DroppableWidget> draggableNo3 = createDraggable("3");

        ((HorizontalPanel) draggableNo2.getOriginalWidget().getOriginalWidget()).add(draggableNo3);
        ((HorizontalPanel) draggableNo1.getOriginalWidget().getOriginalWidget()).add(draggableNo2);

        RootPanel.get().add(draggableNo1);
    }

    private DraggableWidget<DroppableWidget> createDraggable(String id) {
        HorizontalPanel simplePanel = new HorizontalPanel();
        simplePanel.setBorderWidth(2);
        simplePanel.setPixelSize(200, 100);
        Label label = new Label(id);
        label.setSize("100%", "100%");
        label.getElement().setId(id);
        simplePanel.add(label);
        simplePanel.addStyleName("normalWidget");

        DroppableWidget<HorizontalPanel> droppableWidget = new DroppableWidget<HorizontalPanel>(simplePanel);
        droppableWidget.setDroppableHoverClass("droppableHoverClassParallel");
        droppableWidget.setGreedy(true);
        DraggableWidget<DroppableWidget> draggableWidget = new DraggableWidget<DroppableWidget>(droppableWidget);
        draggableWidget.setHandle("#" + id);
        return draggableWidget;
    }
}

css:
.normalWidget {
    background-color: #81adff;
    font-weight: bold;
    font-size: 15px;
    width: 80px;
    height: 30px;
    padding: 10px;
    text-align: center;

    z-index: 300;
}

.droppableHoverClassParallel {
    background-color: #00ffbc;
}

Running this code: dragging Widget id 3 and drop on widget id 2 causes that I 
can't drag Widget 2 and drop on widget 1.

Original comment by gento...@gmail.com on 15 Jan 2013 at 10:10

GoogleCodeExporter commented 9 years ago
I have tried to fix drag function from DroppableHandler, for me it works now as 
I expect. Please look at it and compare to orginal. Let me now if this method 
is ok and if so please include these fix in next release:

    public void drag(Element droppable, Element draggable, GqEvent e) {
        if (options.isDisabled() || greedyChild || !visible) {
            return;
        }

        boolean isIntersect = intersect(draggable);
        PositionStatus c = null;

        if (!isIntersect && isOver) {
            c = PositionStatus.IS_OUT;
        } else if (isIntersect && !isOver) {
            c = PositionStatus.IS_OVER;
        }
        if (c == null) {
            return;
        }

        DroppableHandler parentDroppableHandler = null;
        GQuery droppableParents = $(droppable).parents(
                "." + Droppable.CssClassNames.GWTQUERY_DROPPABLE);
        if (options.isGreedy()) {
            // TODO maybe filter the parent with droppable data instead of test on css
            // class name
            for (int i = 0; i < droppableParents.length(); i++) {
                parentDroppableHandler = DroppableHandler.getInstance(droppableParents.get(i));
                parentDroppableHandler.greedyChild = (c == PositionStatus.IS_OVER);
            }
        }

        for (int i = 0; i < droppableParents.length(); i++) {
            parentDroppableHandler = DroppableHandler.getInstance(droppableParents.get(i));
            if (parentDroppableHandler != null && c == PositionStatus.IS_OVER) {
                parentDroppableHandler.isOver = false;
                parentDroppableHandler.isOut = true;
                parentDroppableHandler.out(droppableParents.get(i), draggable, e);
            }
        }

        if (c == PositionStatus.IS_OUT) {
            isOut = true;
            isOver = false;
            out(droppable, draggable, e);
        } else {
            isOver = true;
            isOut = false;
            over(droppable, draggable, e);
        }
            // This should be deleted:
//        if (droppableParents.length() > 0) {
//            parentDroppableHandler = 
DroppableHandler.getInstance(droppableParents.get(0));
//            if (parentDroppableHandler != null && c == PositionStatus.IS_OUT) 
{
//                parentDroppableHandler.isOut = false;
//                parentDroppableHandler.isOver = true;
//                parentDroppableHandler.over(droppableParents.get(0), 
draggable, e);
//            }
//        }
    }

Original comment by gento...@gmail.com on 17 Jan 2013 at 4:10