中心拖放代理指针

时间:2013-03-07 00:55:17

标签: javascript extjs drag-and-drop extjs4 extjs4.1

我正在使用ExtJS拖放并尝试将拖动代理置于光标下方(代理:表示被拖动元素的半透明填充)。我可以像这样在物理上居中,但之后它不会正常下降:

view.dragZone = Ext.create('Ext.dd.DragZone', view.getEl(), {

    onStartDrag: function(x, y) {
        this.setDelta(150, 20); // (the element is 300 x 40)
    },

    //.. other DD configs

});

当我使用它并将光标移动到放置区时,它就会滑回原来的位置,好像我把它放在一个随机的地方。

如果我不使用它,光标大约是对象的20个像素的NW(即没有居中),但我可以在放置区完全放下它。

我认为它可能有一些东西,光标不是直接在放置区域,因为它现在直接直接在拖动代理上。我尝试重置放置区域的z-index以尝试将带到拖动代理上方,但这似乎不起作用。尝试了其他一些不值得一提的非常随意的事情。

是否有人成功设置了拖放功能,以便拖动代理以光标为中心?

1 个答案:

答案 0 :(得分:3)

我可以使代理居中,并在grid drag/drop plugin的实时预览中正确显示它。

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name'],
    data: [["Lisa"], ["Bart"], ["Homer"], ["Marge"]],
    proxy: {
        type: 'memory',
        reader: 'array'
    }
});

var p = Ext.create('Ext.grid.Panel', {
    store: 'simpsonsStore',
    columns: [
        {header: 'Name',  dataIndex: 'name', flex: true}
    ],
    viewConfig: {
        plugins: {
            ptype: 'gridviewdragdrop',
            dragText: 'Drag and drop to reorganize'
        }
    },
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

p.view.plugins[0].dragZone.onStartDrag = function() {
    this.setDelta(80, 10);
};

Ext.view.DragZoneExt.dd.DragZone没有什么不同。但是,Ext.view.DropZone添加了相当多的逻辑来检查记录被删除的位置。我猜这个逻辑可能就是网格拖放插件正常掉线的原因。