jQuery UI を使用してドラッグ可能/ドロップ可能なフォルダー ファイル ビューを構築しようとしていますが、ヘルパーに起因すると思われる問題が発生しています。これが私のコードです：
HTML
<body>
<div id="topContainer">
<span>Parent Directory 1</span>
</div>
<span id="topFolder" class="folder">
<div class="drop">
</div>
</span>
<hr />
<div id="container" class="container">
<div class="dropzone">
<span>Parent Directory 2</span>
</div>
<div id="cont1" class="container">
<div class="dropzone">
<span>Folder 1</span>
</div>
<span id="folder1" class="folder">
<div class="drop">
<div class="drag"> </div>
<div class="drag"> </div>
<div class="drag"> </div>
<div class="drag"> </div>
<div class="drag"> </div>
<div class="drag"> </div>
<div class="drag"> </div>
<div class="drag"> </div>
<div class="drag"> </div>
<div class="drag"> </div>
<div class="drag"> </div>
<div class="drag"> </div>
</div>
</span>
</div>
<div id="cont2" class="container">
<div class="dropzone">
<span>Folder 2</span>
</div>
<span id="folder2" class="folder">
<div class="drop">
</div>
</span>
</div>
<div id="cont3" class="container">
<div class="dropzone">
<span>Folder 3</span>
</div>
<span id="folder3" class="folder">
<div class="drop">
</div>
</span>
</div>
<span id="mainFolder" class="folder">
<div class="drop">
<div class="drag"> </div>
</div>
</span>
</div>
</body>
jQuery
$(document).ready(function () {
var opts = {
helper: 'clone',
appendTo: 'body'
//appendTo: '#container'
};
$('div.drag').each(function () {
$(this).draggable(opts);
});
$('.dropzone, #topContainer').droppable({
drop: function (e, ui) {
var clone = $(ui.draggable).clone();
clone.draggable(opts);
$(this).siblings('.folder').children('.drop').append(clone);
$(this).removeClass('over');
},
over: function (e, ui) {
$(this).addClass('over');
},
out: function (e, ui) {
$(this).removeClass('over');
}
});
});
CSS
.dropzone {
height: 300px;
width: 100px;
border: 1px solid black;
}
.drag {
clear: both;
height: 50px;
width: 80px;
background-color: black;
position: relative;
cursor: pointer;
}
#topContainer, .dropzone {
height: 50px;
width: 300px;
border: 2px solid black;
text-align: center;
}
.folder .drag {
margin: 5px;
}
.container {
border: 2px solid blue;
margin: 10px;
}
.over {
background-color: yellow;
}
#container {
width: 800px;
height: 600px;
overflow-y: scroll;
border-color: red;
position: relative;
}
フィドル: jsFiddle
つまり、黒いブロックの 1 つを目的のフォルダー (親ディレクトリ 1、親ディレクトリ 2、フォルダー 1 など) にドラッグします。それはすべてうまくいくようです。
正常に動作しないのは、親 (#container) または本体にオーバーフローがある場合です。ブロックをクリックしてドラッグし、マウスホイールでスクロールしようとしても、できません... または、試行し続けると、できる場合があります。(私の画面解像度では明らかではありませんが、Fiddle コードには #container 要素のスクロールバーがあります) これは、ヘルパーを追加する場所のフォーカスと関係があると思います。
後者を考え始めたので、ヘルパーを別の場所に追加し始めました。#container が最も関心のある領域であるため、そこにヘルパーを追加してスクロールを正常に機能させることができます (//appendTo: '#container' のコメントを外し、appendTo: 'body' をコメント アウトします)。
ただし、これにより別の問題が発生します。#container 要素に追加したので、Parent Directory 1フォルダーにドラッグしたときにブロックが表示されないため、ヘルパーに何か問題があると思われます。
案の定、 user helper: 'clone'を使用しないと、きれいにスクロールできます。私は自分のクローンをそこに置くのが好きなので、これはオプションではありません。だから私は皆さんに目を向けます。どうすれば問題を解決できますか? また、正確には何が起こっていますか? 誰かアドバイスはありますか？ぜひ聞いてみたいです。
また、ドラッグ可能の zIndex およびスタック オプションを設定しようとしましたが、うまくいきませんでした。カスタムヘルパー関数を作成し、現在ドラッグされているものを認識させる必要があると思います...しかし、もっと簡単な修正があることを願っています.
誰かが何か洞察を持っているなら、私はそれを聞きたいです。ありがとう！