javascript - Draggable 在 extjs6.5 中不起作用

Question

我正在使用下面的代码 -

afterListeners: function(thisEl, eOpts) {
    sliderSprite = Ext.create('Ext.draw.sprite.Rect', {
            width: spriteWidth, // half year width height : 20, x : 16, y : 0, draggable : true, floatable : true, 'stroke-width' : 2, fill : '#FCE5C5', stroke : '#C6B395' });

            sliderSprite.show(true);
            thisEl.getSurface().add(sliderSprite);
            alert("before source");

            new Ext.drag.Source({
                element: sliderSprite,
                constrain: {
                    // Drag only horizontal in 30px increments
                    horizontal: true, //                                                snap: { //                                                  y: 30 //                                                }
                },
                onDragMove: function() {
                    alert("inside source");
                    spriteHighlighter.remove();
                    me.onDragSprite(e, this, chartWidth, spriteWidth);
                },
                onDragEnd: function() {
                    me.refreshCharts(xPlots, bigChart, sliderSprite, firstYear, lastYear, chartWidth);
                }

            });
            alert("outside source");

        },
    }
}

现在，问题是，控制不会进入Ext.drag.Source(). 我在源和外部源之前收到 2 条警报消息。并且因为它不会进入内部Ext.drag.Source()。

元素的可拖动功能不起作用。我应该怎么办 ？

标签： javascriptextjsextjs6-classic

Answer 1

首先，您需要明确要使用哪个组件。之后，您需要将afterrender事件放在该组件上，并且在该事件内部您可以使用Ext.drag.Source.

在这个FIDDLE中，我使用buttonand创建了一个演示Ext.drag.Source。

代码片段

Ext.application({
    name: 'Fiddle',

    launch: function () {
        var buttons = [],
            rendomColor = () => {
                return "#" + ((1 << 24) * Math.random() | 0).toString(16);
            };

        for (var i = 0; i < 10; i++) {
            buttons.push({
                text: `Button ${i+1}`,
                margin: 10,
                style: `background:${rendomColor()}`
            });
        }

        Ext.create({
            xtype: 'panel',
            height: window.innerHeight,
            title: 'Ext.drag.Source Example',
            defaults: {
                xtype: 'button'
            },
            items: buttons,
            renderTo: Ext.getBody(),

            listeners: {
                afterrender: function (panel) {
                    panel.items.items.forEach(item => {
                        new Ext.drag.Source({
                            element: item.el,
                            constrain: {
                                // Drag only vertically in 30px increments
                                //vertical: true,
                                snap: {
                                    y: 1,
                                    x: 1
                                }
                            }
                        })
                    })

                }
            }
        });
    }
});