Question

我需要制作一个可以在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();

任何建议都将不胜感激。

Answer 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元素。这样您就可以添加一些图形，当您想要拖动它时，它们就像每个元素的句柄一样。

此外，您可以使用'proxy'属性指定拖动项目时显示的html元素。因为拖动实际上使用css转换，所以如果你拖动列表的元素，它会变得相当复杂，而列表是滚动的。代理可以是不属于列表的div。

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

如何使用Sencha Touch 1中的拖放重新排列容器中的项目

1 个答案: