Dojo DND的用户界面与显示项目时的用户界面不同

看来你已经找到解决问题的办法了,但我想我只需投入我的0.02美元。

我所做的是为每个拖动手柄使用自定义的“拖动虚拟人物”(在Dojo白话文中,“虚拟人物”是用户拖动时显示的内容)。下面是代码的一个直接片段:

for ( var i=0; i<this.cellsTotal; ++i ) {
    // Create the DND source
    var source = new dojo.dnd.Source(
        "drag-handle-container-" + i,
        {copyOnly: true, creator: createAvatar}
    );
    // Add stuff to it
    source.insertNodes(null, [{data: i, type: [this.dnd.classes.handle]}]);
}

createAvatar 以前定义的函数回调是否如下:

var createAvatar = function(item, mode) {
    var node       = dojo.doc.createElement("span");
    node.id        = dojo.dnd.getUniqueId();
    node.itemIndex = parseInt(item.data);
    dojo.addClass(node, "dojoDndItem");

    // Creating the drag avatar or the source node?
    if ( mode == "avatar" ) {
        // Create the DOM for the avatar (what is shown while dragging)
    } else {
        // Create the DOM for the source node (the handle for drag initiation)
    }

    return {node: node, data: item, type: [context.dnd.classes.avatar]};
};

你的方法显然有效,但是这个方法让你不用担心切换样式,因为Dojo会为你处理所有的样式。

P.S.:我讨厌Dojo DND及其文档。这让我花了很长时间才弄明白我最初是什么时候必须这么做的。

似乎比我想象的要容易。

在初始可拖动项中,创建一个子项,该子项具有要显示的内容,并将CSS值设为display:none,然后在拖动时,将“其他”项设为display:none,并将display:block的值设为新项。