Пользовательский интерфейс jQuery: проблема с перетаскиваемой прокруткой
Я пытаюсь создать перетаскиваемый / сбрасываемый вид файла папки с помощью 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, Родительский каталог 2, Папка 1 и т. Д.). Кажется, что все работает нормально.
То, что не работает нормально, это когда переполнение родительского элемента (#container) или тела. Если вы нажмете на блок для перетаскивания и попытаетесь прокрутить колесо мыши, вы не сможете ... или если вы продолжаете пытаться, вы иногда можете. (Это не очевидно с моим разрешением экрана, но в коде Fiddle есть полоса прокрутки для элемента #container) Я предполагаю, что это как-то связано с тем, куда я добавляю помощника.
Поскольку я начал думать о последнем, я начал добавлять помощника в разные места. Поскольку #container - это область, которая меня больше всего интересует, я могу добавить туда помощника и заставить свиток работать нормально (раскомментируйте // appendTo: '#container' и закомментируйте appendTo: 'body').
Однако это создает другую проблему. Теперь, когда я добавляю элемент #container, мой блок не виден, когда он перетаскивается наРодительский каталог 1 папка, которая заставляет меня поверить, что с помощником что-то не так.
Конечно же, если вы не используетепомощник: «клон»прокручивать можно просто красиво. Это не вариант, потому что мне нравится, когда мой клон там. Поэтому я перехожу к вам. Как я могу решить мою проблему, и что именно происходит? У кого-нибудь есть совет? Я хотел бы услышать это.
Также приятно отметить, что я попытался установить параметры zIndex и стека для перетаскиваемого объекта, но не получилось. Я предполагаю, что мне придется создать пользовательскую вспомогательную функцию и сообщить ей о том, что в данный момент перетаскивается ... но я надеюсь, что есть более легкое решение.
Если у кого-то есть понимание, я хотел бы услышать это. Спасибо!