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

このように、レンダリングについて心配する必要はありません。ストアを更新するだけで、レンダリングが自動的に行われます。リスト内の各アイテムにはドラッグ可能オブジェクトがありますが、ドロップ可能オブジェクトはありません。代わりに、「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 のドキュメントを参照し、ドキュメントに記載されていないものがたくさんあるため、ソース コードを確認してください 。

于 2012-12-31T14:02:22.183 に答える