使用Ext JS 7.0.0拖放sprite

Ext.application({
    name: 'DragAndDropExample',
    launch: function () {
        Ext.create('Ext.panel.Panel', {
            title: '拖放示例',
            width: 400,
            height: 300,
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'component',
                html: '拖动我',
                style: {
                    width: '100px',
                    height: '100px',
                    background: 'red',
                    color: 'white',
                    textAlign: 'center',
                    lineHeight: '100px',
                    cursor: 'move'
                },
                listeners: {
                    render: function (component) {
                        Ext.create('Ext.drag.Source', {
                            element: component.getEl(),
                            constrain: Ext.getBody(),
                            proxy: {
                                type: 'placeholder',
                                cls: 'drag-proxy'
                            }
                        });
                    }
                }
            }, {
                xtype: 'component',
                html: '放置目标',
                style: {
                    width: '200px',
                    height: '200px',
                    background: 'blue',
                    color: 'white',
                    textAlign: 'center',
                    lineHeight: '200px'
                },
                listeners: {
                    render: function (component) {
                        Ext.create('Ext.drag.Target', {
                            element: component.getEl(),
                            accept: 'component',
                            overStyle: 'background-color: green;'
                        });
                    }
                }
            }]
        });
    }
});