1

我需要在 Sencha Touch 1.0 应用程序中创建一个可以使用拖放重新排列的列表。所以到目前为止我所做的是创建一个面板，其中项目列表由交替的可拖放面板组成。我可以将一个项目拖到一个新位置，我可以弄清楚我需要在哪里插入它，但问题是我不知道如何在面板中实际移动项目。

我试图删除该项目并将其插入新位置，但它有点慢，一旦我将 Draggable 对象上的 eventTarget 更改为指向该项目的子项（您必须用于拖动它）。

var paragraphText = p.el.dom.outerText;
paragraphPanel.remove(paragraph, true);
paragraphPanel.insert(dropIndex, createParagraph(paragraphText));
paragraphPanel.doLayout();

我还尝试不破坏该项目，只是将其移除并将其重新插入新位置。这根本不起作用，因为拖动被重置并且列表中没有任何事情发生，即使下面的代码被执行。

paragraphPanel.remove(paragraph, false);
paragraphPanel.insert(dropIndex, paragraph);
paragraphPanel.doLayout();

任何建议，将不胜感激。

4

1 回答 1

1

最后我放弃了尝试为此使用 Panel ，而是使用了 Ext.List ：

this.paragraphList = new Ext.List({
    xtype: 'list',
    store: this.paragraphStore,
    itemTpl : '<div class="paragraph-content" >{text}</div><div class="paragraph-handle" ></div>',
    cls: 'paragraph-list',
    disableSelection: true,
    height:'100%',
    scroll: 'vertical'
});

这样我就不必担心渲染这个东西，我可以更新商店，渲染会自己发生。列表中的每个项目都有一个 Draggable 但没有 Droppable 对象。相反，在 'beforedragend' 事件中，我计算物品被丢弃的位置并相应地更新商店。一旦你弄清楚了 dragIndex 和 dropIndex 你可以做这样的事情：

//if item is moving down in the list dropIndex is decremented
//because the item is first removed and then added to new position
if (dropIndex > dragIndex) {
    dropIndex--;
}

//in case the item isn't being dropped in an appropriate place
//just return and let Sencha reset the draggable object (snap back to place)
if (dropIndex == null || dropIndex == dragIndex) {
    return;
}

//this will stop the item from resetting  
//it is not in the Sencha documentation
draggable.cancelRevert = true;
this.resetAll();

var store = this.paragraphStore;
var paragraph = store.getAt(dragIndex);
store.suspendEvents(false);
store.remove(dragIndex);
store.resumeEvents();
store.insert(dropIndex, paragraph);

这里有一些额外的事情值得一提：

在 Draggable 对象上，您可以使用“eventTarget”来指定将启动拖动操作的 HTML 元素。这样您就可以添加一些图形，当您想要拖动它时，它就像每个元素的句柄一样。

您还可以使用“代理”属性来指定在拖动项目时显示的 html 元素。因为拖动实际上使用 css 翻译，如果您拖动列表的一个元素，例如在列表滚动时，它会变得相当复杂。代理可以是不属于列表的 div。

有关更多信息，请参阅 Sencha 文档并查看他们的源代码，因为有很多没有记录的内容： http ://docs.sencha.com/touch/1-1/#!/api/Ext.util.Draggable

于 2012-12-31T14:02:22.183 回答