【问题标题】:center drag and drop proxy on pointer在指针上居中拖放代理
【发布时间】:2013-02-22 01:26:00
【问题描述】:

我正在使用 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 像素处(即不居中),但我可以将它完全放在放置区域中。

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

有没有人成功设置拖放,使拖动代理以光标为中心?

【问题讨论】:

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


    【解决方案1】:

    我能够使代理居中,并在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.DragZone 看起来与Ext.dd.DragZone 没有太大区别。但是,Ext.view.DropZone 添加了相当多的逻辑来检查记录被丢弃的位置。我猜这个逻辑可能是网格拖放插件正常工作的原因。

    【讨论】:

    • 读完这堂课后,我认为你说得有道理。关于如何实现常规拖放的任何想法?
    • 拖动时 DropZone 的 getTargetByEvent 方法会返回什么?在我看来,它没有返回节点。发生这种情况时,会调用默认的 onContainerOver 逻辑,该逻辑返回 false 表示不允许放置。
    • Ext.view.DropZone 的 getTargetByEvent 方法添加了额外的逻辑来根据鼠标在页面上的实际位置抓取节点。
    • 我尝试使用document.querySelectorAll(':hover')document.elementFromPoint 的选择器尝试获取鼠标所在的元素,但不幸的是,代理元素是他们返回的全部。我想这意味着您无法实现自己的 getTargetByEvent 版本,该版本手动抓取具有当前鼠标 XY 位置所在区域的元素。我不知道将鼠标光标放在代理上是否值得麻烦(以及可能的效率问题)。
    • 感谢您在这方面的帮助,您基本上是对的。除了 IE,我还可以使用 css: pointer-events 来获得极大的优势,但我现在有一个跨浏览器解决方案正在运行,我稍后会发布答案。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-04-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多