Ext.js - 拖放

简介

Ext.js 是一款基于 JavaScript 的前端框架。 它提供了丰富、高效、易用的 API，支持数据绑定、模块化开发、UI 组件化等特性。

其中，拖放功能是 Ext.js 提供的重要功能之一。用户可通过鼠标对组件进行拖拽，从而实现移动、排序、缩放等操作。

实现方式

创建拖动源

默认情况下，Ext.js 的组件并没有拖动功能。需要手动添加拖动功能，使得组件成为一个拖动源。

var dragSource = Ext.create('Ext.dd.DragSource', el, config);

其中，el 参数指定了要添加拖动功能的组件（DOM 元素或 Ext.js 组件），config 参数是一个配置对象，用于配置拖动源的行为。

创建拖动目标

拖动源需要有拖动目标才能拖动到某个位置。一个拖动目标可以同时接受多个拖动源。

var dropTarget = Ext.create('Ext.dd.DropTarget', el, config);

其中，el 参数指定了要添加拖动目标的组件或者元素，config 参数是一个配置对象，用于配置拖动目标的行为。

拖动源和拖动目标交互

在创建完拖动源和拖动目标后，需要在两者之间建立交互。

dropTarget.notifyEnter(dragSource, e, ddData);
dropTarget.notifyOver(dragSource, e, ddData);
dropTarget.notifyDrop(dragSource, e, ddData);
dropTarget.notifyOut(dragSource, e, ddData);

其中，notifyEnter() 在拖动源进入拖动目标时调用，notifyOver() 在拖动源在拖动目标上移动时调用，notifyDrop() 在拖动源被释放到拖动目标时调用，notifyOut() 在拖动源离开拖动目标时调用。

配置拖动行为

Ext.create('Ext.dd.DragSource', el, {
    // 配置拖动操作时要显示的元素
    getDragData: function(e) {
        return {
            // 返回 DOM 元素或 Ext.js 组件
            el: this.theElement
        };
    },

    // 配置对鼠标事件的响应
    onStartDrag: function() {
        ...
    },

    ...
});

Ext.create('Ext.dd.DropTarget', el, {
    // 配置允许接收的拖动源
    notifyEnter: function(source, e, ddData) {
        ...
    },

    // 配置对鼠标事件的响应
    notifyOver: function(source, e, ddData) {
        ...
    },

    // 配置当拖动源被释放到拖动目标上时的响应
    notifyDrop: function(source, e, ddData) {
        ...
    },

    ...
});

示例

Ext.create('Ext.panel.Panel', {
    title: '拖放示例',
    width: 400,
    height: 400,
    layout: 'fit',
    items: [
        {
            xtype: 'panel',
            title: '试试拖动我',
            x: 50,
            y: 50,
            width: 100,
            height: 100,
            listeners: {
                render: function(panel) {
                    var dragSource = Ext.create('Ext.dd.DragSource', panel.getEl(), {
                        getDragData: function(e) {
                            return {
                                el: panel.getEl()
                            };
                        }
                    });

                    var dropTarget = Ext.create('Ext.dd.DropTarget', panel.getEl().up('panel'), {
                        notifyEnter: function(source, e, ddData) {
                            return this.dropAllowed;
                        },

                        notifyOver: function(source, e, ddData) {
                            return this.dropAllowed;
                        },

                        notifyDrop: function(source, e, ddData) {
                            var panelEl = ddData.el;
                            var xy = panelEl.getXY();

                            panelEl.setXY([e.getPageX() - xy[0], e.getPageY() - xy[1]]);

                            return true;
                        }
                    });
                }
            }
        }
    ],
    renderTo: Ext.getBody()
});

以上是一个简单的拖放示例。一个 panel 组件被选为一个拖动源，同时也是一个拖动目标。当该拖动源被拖动到 panel 所在的区域，它会被释放并移动到鼠标落点的位置。