Javascript DragTable在extjs6.5中不起作用

我正在使用以下代码-

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内部。我收到两条警报消息，在源代码之前和源代码之外。因为它不在Ext.drag.Source中

---

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

首先，您需要明确要在哪个组件上使用。之后，您需要将事件放在该组件上，并在该事件内部使用

在本文中，我使用button和Ext.drag.Source创建了一个演示

代码片段

---

您的代码不清楚，请提供更多源代码。我的问题是-如何使用Ext.drag.source？但您告诉drag无法工作。所以我的问题是你尝试了什么？你能提供更多的信息吗？drag-able不起作用的原因是因为我使用Ext.drag.Source的方式不正确。这就是控件不进入“内部源代码”警报的原因。如果您能帮助我了解如何使用Ext.drag.source？嗨，Narendra。我是这里的一名志愿者编辑，我所做的一件事就是努力保持问答文章的质量水平。每天我都会搜索那些不会给帖子添加任何实用程序的闲聊短语，然后将它们删除——这也是为什么Stack Overflow的质量级别高于其他地方的原因之一。考虑到这一点，我想请您不要添加hope，这会有帮助，或者希望这会引导您达到您的要求。这是一个很好的陈词滥调，但它并没有给这篇文章增加任何有用的东西，编辑们更愿意删除它，因为我们希望简洁。我们已经从您的材料中删除了160个，因此，如果您不再添加，将节省编辑大量的时间和精力。非常感谢。

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
                                }
                            }
                        })
                    })

                }
            }
        });
    }
});