質問: お世話になっております。 jstreeを使ってツリー構造を作成しつつ、 ツリーの内容をドラッグアンドドロップしたいと考えています。 具体的な動作としては、 ツリーの項目をドラッグして、ツリー以外の箇所にドロップしたいです。 (ドラッグした項目をコピーして貼り付ける、というイメージです) また、複数選択を無効、ツリー内での移動を無効にしてソートも行えないようにしたいと思っています。 現在のコード ------ ``` Test グループ1 aaa bbb ``` ``` $(function(){ // jstree実装 $('#divTest').jstree({ "core" : { "check_callback" : true }, "plugins" : [ "dnd" ] // ツリー内でドラッグアンドドロップを行えるようにする }); }); ``` 公式サイトなどを見たのですが理解しきれていない状態です。 現在は公式サイトなどを参考に、ツリー内でのドラッグアンドドロップ、 ソートが行える状態にはなっています。 また、別の箇所ではツリー形式ではない箇所でドラッグアンドドロップを行うために sortableを使用しています。 jstreeとsortableを合わせたような書き方も出来るのでしょうか? htmlやJavaScriptでどういった書き方をすることで実装できるのか、 またはjstreeのみでは実装不可能なのか、代替案などは存在するのか、など 参考となるサイトや、コードなども教えていただければと思います。 よろしくお願いいたします。
回答: HTML ドラッグ&ドロップ APIを使えば可能です. ・・・が, UIスクリプトの中でも**最強クラスに制御が難しい**部類に入るため, 心してかかって下さい. ※例外系の処理が異常に多い上, それらの一つ一つが致命的な問題を引き起こすため(経験上) そのため, このAPIを使わないように**ドラッグ・ドロップ操作を真似る**と良いかもしれません. * dragXX系のイベントは全て`e.preventDefault`で**ブラウザの動き(標準動作)を無効化**する * `mousedown`イベントと`mouseup`イベントが発生した座標を元に,カーソル直下のノードを`document.elementFromPoint`メソッドで取得し, その対応からデータの授受を行う. ようにすれば, 何とかなるかもしれません. とは言え, 既に導入しているプラグインとの兼ね合いもありますから, 本当にうまく行くかどうかは慎重に検証する必要があります.