[Flex]Drag&Drop は俺にきいてもわからないかもしれない

以前、[Flex]Drag&Drop は俺にきいてくれを書きましたが、その続編。前回の通り、Listのカスタムコンポーネントを作ったんだけど、なんか、動作が変。

  1. 別のリストからドラックしてきてドロップすると、ドロップ先のリストがマウスの動きに合わせてスクロールしてしまう
  2. アイテムを削除すると、リストが先頭に戻ってしまう(スクロールして下のほうだと面倒くさい)
  3. アイテムのドラック&ドロップで移動したときも同様に先頭に戻ってしまう


まず、1.はアイテムを他のリストからドラックして持ってくると、フォーカスが外れずマウスを動かすとドロップ対象のListのスクロールバーが動いてしまう。たぶん、ドラック中のまま、みたいな感じ。調べてみると、ドラック&ドロップの流れには、4つあって、dragEnterHandler()、dragDropHandler()、dragExitHandler()、dragCompleteHandler()。dragEnterでドラックされてきたオブジェクトが自分が受け入れ可能か判断し、DragManagerにフィードバックする。dragDropHandlerはドロップされた時の処理。dragExitはこちらによるとドロップを許可された状態でドラッグアウトされたときの処理みたい。俺は関係ないと思ってこの処理をoverrideしませんでした(オリジナルの実装のまま)。それとdragCompleteは終了処理。これもoverrideしてない(前述のコードではsuperを呼んだだけ)。で、手前のコードのdragDropHandler()だと、ドロップ後、アイテムも対象リストに追加されるので一見ちゃんと終わったかのように見えるのだが、どうやら処理が足りないらしい。だったらdragExitHandler()を呼んじゃぇ、と思い呼んでみたところ思惑通り動作!というわけで、dragDropHandler()の最後にdragExitHandler()を呼ぶことにしました(苦笑)。正式文章によると、Adobeの「リストコントロールでのドラッグ&ドロップの使用」によると hideDropFeedback() を呼べばいいようですね。ってか、hideDropFeedback()は前のコードには書いてありました^-^; いつのまにか消しちゃったみたいです俺。

さて、あとは2.と3.です。これは実際UIとしては大変使いづらい。list.dataProvider.removeItemAt(i) をしてるだけなんですが、スクロールされてるとリストも先頭に戻ってしまうんですね^-^; 困ったんですが、リファレンスを眺めていたら、scrollToIndex(i)っていうメソッドがあったんですね:-) 削除する前のselectedIndexを取っておいて削除後に呼んでみたところ本来の動作に。3.の方も内部的にremoveItemAt(i)的な処理が呼ばれているのか、同じ状況だったので(ちなみに、既に追加済みのオブジェクトをコピーしないで単純に追加しちゃうと前のアイテムが触れないアイテムとして残る。移動の処理はこれを削除してるんだと思う)、同様にscrollToIndex(i)を呼んでみました。

ちなみに、素のListだと、この動作は期待通りに動きます。なぜ、Listを継承しただけだし、処理自体はdataProviderのメソッドを呼んでいるだけなのに、動きが変わってしまうのか、大変不可解です。。。

コメント

  1. […] [Flex]Drag&Drop は俺にきいてもわからないかもしれない [Flex]Drag&Dropは俺にきいてくれ […]

  2. Yahoouj より:

    Really good work about this website was done. Keep trying more – thanks!

タイトルとURLをコピーしました