jstreeを使用してドラッグを行い、ツリー以外の箇所にドロップしたい

お世話になっております。

jstreeを使ってツリー構造を作成しつつ、
ツリーの内容をドラッグアンドドロップしたいと考えています。

具体的な動作としては、
ツリーの項目をドラッグして、ツリー以外の箇所にドロップしたいです。
（ドラッグした項目をコピーして貼り付ける、というイメージです）
また、複数選択を無効、ツリー内での移動を無効にしてソートも行えないようにしたいと思っています。

現在のコード

html
1<!-- 移動元ツリー -->
2<div id="divTest">
3  <ul>
4    <li>
5      <span>Test</span>
6      <ul>
7        <li>
8          <span>グループ1</span>
9          <ul>
10            <li><span>aaa</span></li>
11            <li><span>bbb</span></li>
12          </ul>
13        </li>
14      </ul>
15    </li>
16  </ul>
17</div>
18
19<!-- ドロップ箇所 -->
20<div style="width:100px; height:50px;">
21  <!-- ドラッグしてここに「<span>aaa</span>」や「<span>Test</span>」を貼り付ける -->
22</div>

JavaScript
1  $(function(){
2    // jstree実装 
3    $('#divTest').jstree({
4    "core" : {
5      "check_callback" : true
6    },
7    "plugins" : [ "dnd" ] // ツリー内でドラッグアンドドロップを行えるようにする
8    });
9  });

公式サイトなどを見たのですが理解しきれていない状態です。
現在は公式サイトなどを参考に、ツリー内でのドラッグアンドドロップ、
ソートが行える状態にはなっています。

また、別の箇所ではツリー形式ではない箇所でドラッグアンドドロップを行うために
sortableを使用しています。
jstreeとsortableを合わせたような書き方も出来るのでしょうか？

htmlやJavaScriptでどういった書き方をすることで実装できるのか、
またはjstreeのみでは実装不可能なのか、代替案などは存在するのか、など
参考となるサイトや、コードなども教えていただければと思います。

よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

HTML ドラッグ＆ドロップ APIを使えば可能です.
https://developer.mozilla.org/ja/docs/Web/API/HTML_Drag_and_Drop_API

・・・が, UIスクリプトの中でも最強クラスに制御が難しい部類に入るため, 心してかかって下さい.
※例外系の処理が異常に多い上, それらの一つ一つが致命的な問題を引き起こすため(経験上)

そのため, このAPIを使わないようにドラッグ・ドロップ操作を真似ると良いかもしれません.

dragXX系のイベントは全てe.preventDefaultでブラウザの動き(標準動作)を無効化する
mousedownイベントとmouseupイベントが発生した座標を元に,カーソル直下のノードをdocument.elementFromPointメソッドで取得し, その対応からデータの授受を行う.

ようにすれば, 何とかなるかもしれません.

https://developer.mozilla.org/ja/docs/Web/API/Document/elementFromPoint

とは言え, 既に導入しているプラグインとの兼ね合いもありますから, 本当にうまく行くかどうかは慎重に検証する必要があります.

投稿2018/04/10 08:49

編集2018/04/10 09:25