1

私はいくつかのjsonが取り込まれたfancytreeを持っています。ドロップ可能なdivもあります。ツリー内でノードをドラッグできるようにしたい (つまり、含まれている階層内で物を移動できるようにしたい)、ツリーから外部のドロップ可能な div に物をドラッグできるようにしたい。

これどうやってするの？

ここに私が持っているものがあります:

私のHTML：

<div id="tree"></div>
<div id="droppable">
stuff
</div>

dnd 初期化オプション:

{
                    autoExpandMS: 400,
                    focusOnClick: true,
                    preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
                    preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
                    dragStart: function(node, data) {return true;},
                    dragEnter: function(node, data) {return true;},
                    dragDrop: function(node, data) {data.otherNode.moveTo(node, data.hitMode);},
                                draggable: {
                    containment: 'document',
                    scroll : false,
                    scrollSpeed: 7,
                    scrollSensitivity: 10,
                }
                },

ドロップ可能な初期化

$('#droppable').droppable({
    onDrop  : function(e,source){
        alert('dropped: '+source.textContent);  
        window.dropped = source;
        window.event   = e;
    },
});

拡張子:

["dnd","edit","contextMenu"] 拡張機能を利用しています。私が気付いていない競合がある場合に備えて、これについて言及しています...ただし、編集とコンテキストメニューを無効にしましたが、役に立ちませんでした。

行動：

  • contextMenu と edit 拡張機能は正常に機能します。
  • ツリー内で項目をドラッグ アンド ドロップして、ノードを並べ替えることができます。
  • ツリーからドラッグできません
    • ツリーでscroll: trueは、端をドラッグすると無限にスクロールするスクロールバーがいくつか取得されます
    • ツリーのスクロールバーは同じように動作しscroll: falseますが、実際のスクロールは発生しません
    • 封じ込めは効果がないようです

含まれるリソース:

  • jquery.js jquery-ui-1.11.0.js
  • jquery.fancytree-all.css
  • jquery.contextMenu.css
  • jquery.contextMenu-1.6.5.js
  • jquery.fancytree.contextMenu.js
  • fancytree.min.css
4

4 に答える 4

0

問題は、FancyTree がツリー要素に関連付けられた独自のドラッグ可能なヘルパーを使用することです。jquery.fancytree.dnd.js の _onDragEvent を参照してください (389 行目)。

コードをハッキングしてヘルパーをボディに追加することで、これを回避しました。

$("body").append($helper);

...それ以外の...

$("ul.fancytree-container", node.tree.$div).append($helper);
于 2014-11-04T15:45:08.773 に答える
0

ツリーから要素をドラッグすることで同じ問題に直面し、fancytree-container 要素の css ハックを簡単に行うことになりました。

ul.fancytree-container {
 overflow: visible;
}
于 2014-08-11T09:46:46.383 に答える