使用自定义 ListItem 在列表之间拖放

Question

我有多个带有自定义 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);
    }
}
});

Answer 1

我犯了一个愚蠢的错误，我忘了更新 listItem 的上下文。