如何在Ext JS 7.0.0中实现Sprite精灵的拖拽功能

Ext JS 4到7版本对draw包做了大规模API重构，原有直接在Sprite实例上绑定鼠标事件的逻辑已不兼容，可按照以下逻辑实现拖拽功能：

• 核心适配调整说明

  Ext JS 7中Sprite不再支持直接绑定原生鼠标事件，所有事件需要通过所属的Ext.draw.Surface或Ext.draw.Container委托绑定，坐标计算需要使用surface内置的坐标转换方法，避免画布缩放、偏移带来的位移误差。

• 完整实现代码示例

// 1. 初始化画布和可拖拽Sprite
const drawContainer = Ext.create('Ext.draw.Container', {
    renderTo: Ext.getBody(),
    width: 600,
    height: 400,
    sprites: [{
        type: 'rect',
        x: 100,
        y: 100,
        width: 80,
        height: 50,
        fillStyle: '#157fcc',
        isDraggable: true // 自定义标记用于识别可拖拽Sprite
    }]
});
const surface = drawContainer.getSurface();
let draggingSprite = null;
let dragOffset = {x: 0, y: 0};

// 2. 绑定拖拽起始事件
surface.on('mousedown', function(event, target) {
    if (target && target.isSprite && target.attr.isDraggable) {
        draggingSprite = target;
        const canvasXY = surface.getEventXY(event);
        dragOffset.x = canvasXY[0] - draggingSprite.attr.x;
        dragOffset.y = canvasXY[1] - draggingSprite.attr.y;
        event.stopEvent();
    }
});

// 3. 绑定拖拽位移更新事件
surface.on('mousemove', function(event) {
    if (!draggingSprite) return;
    const canvasXY = surface.getEventXY(event);
    draggingSprite.setAttributes({
        x: canvasXY[0] - dragOffset.x,
        y: canvasXY[1] - dragOffset.y
    });
    surface.renderFrame();
    event.stopEvent();
});

// 4. 绑定拖拽结束事件
surface.on('mouseup mouseleave', function() {
    draggingSprite = null;
});

• 额外适配说明

  如果使用Ext JS 7 Modern toolkit适配移动端，需要将事件名称替换为touchstart/touchmove/touchend，坐标计算逻辑无需调整。
  Ext JS 4中常用的Ext.dd.DragSource通用拖拽组件已不再兼容Sprite元素，必须使用surface委托事件的方式实现拖拽。

内容的提问来源于stack exchange，提问作者jm130794