入れ子のリストをドラッグアンドドロップで入れ替えるには？

###前提

マインドマップをhtmlとjavascriptで作っています。
マインドマップのライブラリは以下のものを使っています。

###実現したい事

マインドマップの要素をドラッグアンドドロップで移動したいです。
しかし、要素が入れ子となっているため、行き詰っています。

jqueryUIのsortableを試しましたが、一階層のリストにのみ有効で、多階層のリストとなると対応できませんでした。

いろいろ考えたのですが、ちょっと分からなくなってしまったので、質問させていただきました。何かアイデアなどがありましたら教えていただければ幸いです。

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

回答1件

ベストアンサー

作ってみました。
実装は適当なので、放り込むときは枠ギリギリ辺りを狙ってください。
HTML5のDrag and Drop APIを使用しています。

ポイントとしては、

ドラッグしたい要素に対してdraggable="true"を付与しなければならない
dragstartイベントでevent.dataTransfer.setData(type, data)をしておく
dragoverイベントでevent.preventDefault()をしておく
dropイベントでevent.stopPropagation()とevent.preventDefault()をしておく（jQueryではreturn falseが両方を担います）