如何通過在Sencha Touch中拖放來重新排列容器中的項目1

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

最後，我放棄了試圖用一個面板，這和我只是用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' 
}); 

這樣我就不必擔心渲染的東西，我可以更新商店並且渲染將自行發生。列表中的每個項目都有一個可拖動的對象，但沒有可拖動的對象。相反，在'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); 

這裏有一個值得一提的一些額外的東西：

在拖動對象，你可以使用「的eventTarget」來指定將啓動拖動操作的HTML元素。這樣你可以添加一些圖形，當你想拖動它時，它就像每個元素的句柄一樣。

您也可以使用'proxy'屬性來指定拖動項目時顯示的html元素。由於拖動實際上使用CSS轉換，因此拖動列表元素時可能會變得相當複雜，例如滾動列表。代理可以是不屬於列表的一部分。

更多看到煎茶文檔，並在自己的源代碼來看看，因爲有很多的東西，這不是記載： http://docs.sencha.com/touch/1-1/#!/api/Ext.util.Draggable