拖拽使用自定义ListItem在List之间删除

时间:2017-01-18 16:15:32

标签: drag-and-drop qooxdoo

我有自定义ListItems的多个列表(所有这些都有相同的),我希望它们可以排序,并能够拖动和放大将它们放到另一个列表中。

所有这一切都很好,但是当我选择一个Droped ListItem时,我得到一个异常,即该项不是这个小部件的子代。此外,当我使用listItem调用列表中的indexOf方法时,我得到-1。

因此,当我在列表中调用getChildren(插入之前和之后)时,元素位于列表中,即使选择,视图也会正确呈现它!

以下是我的清单代码:

qx.Class.define("padawan.quicksearch.SearchList", {
extend : qx.ui.form.List,

construct : function() {
    this.base(arguments);
    this.context = arguments[0];

    this.setHeight(null);

    this.setEnableInlineFind(false);

    this.setDroppable(true);
    this.setDraggable(true);

    // create the controller
    var controller = new qx.data.controller.List(null, this);
    controller.setDelegate({
        createItem : function() {
            return new padawan.quicksearch.SucheComposite(this.context);
        },
        bindItem : function(controller, item, id) {
            controller.bindProperty("", "model", null, item, id);
        }
    });

    // Create drag indicator
    var indicator = new qx.ui.core.Widget();
    indicator.setDecorator(new qx.ui.decoration.Decorator().set({
        widthTop : 1,
        styleTop : "solid",
        colorTop : "black"
    }));
    indicator.setHeight(0);
    indicator.setOpacity(0.5);
    indicator.setZIndex(100);
    indicator.setLayoutProperties({
        left : -1000,
        top : -1000
    });
    indicator.setDroppable(true);
    qx.core.Init.getApplication().getRoot().add(indicator);

    // Just add a move action
    this.addListener("dragstart", function(e) {
        var item = this.getSucheComposite(e.getOriginalTarget());

        if (!item) {
            e.preventDefault();
            return;
        }

        e.addType("items");
        e.addAction("move");
    });

    this.addListener("droprequest", function(e) {
      e.addData("items", [e.getDragTarget()]);
    }, this);

    this.addListener("dragend", function(e) {
        // Move indicator away
        indicator.setDomPosition(-1000, -1000);
    });

    this.addListener("drag", function(e) {
        var orig = e.getOriginalTarget();

        // if (!qx.ui.core.Widget.contains(this, orig) && orig != indicator)
        // {
        // return;
        // }

        var origCoords = orig.getContentLocation();

        indicator.setWidth(orig.getBounds().width);
        indicator.setDomPosition(origCoords.left, origCoords.top);
    });

    this.addListener("drop", function(e) {
        var selection = e.getData("items")[0];
        this.__reorderList(selection, e.getOriginalTarget(), e.getTarget());
    }, this);
},

members : {
    getSucheComposite : function(child) {
        if (child.classname == "padawan.quicksearch.SucheComposite")
            return child;

        while (child) {
            child = child.getLayoutParent();

            if ("padawan.quicksearch.SucheComposite" == child.classname) {
                return child;
            }
        }

        return child;
    },

    __reorderList : function(selection, target, list) {
        selection = this.getSucheComposite(selection);
        if (target.classname !== "padawan.quicksearch.SucheComposite" || !selection) {
            return;
        }

        switch(this.context.type){
        case 'Zeile':
            selection.setIsFilter(false);
            selection.setIsRow(true);
            selection.setIsColumn(false);
            break;
        case 'Filter':
            selection.setIsFilter(true);
            selection.setIsRow(false);
            selection.setIsColumn(false);
            break;
        case 'Spalte':
            selection.setIsFilter(false);
            selection.setIsRow(false);
            selection.setIsColumn(true);
            break;
        }

        list.addBefore(selection, target);
    }
}
});

1 个答案:

答案 0 :(得分:0)

我的愚蠢错误,我忘了更新listItem的上下文。