Собираетесь ли вы разрешить более одного экземпляра с вашими перетаскиваемыми объектами? затем используйте помощник и добавьте параметр:
$(".tag_cell").draggable({
helper: 'clone',
appendTo: 'div#myHelperHolder'
});
Тогда в вашем css вы можете установить zindex для div # myHelperHolder равным 999.
Если нет, попробуйте использовать опцию zindex:
$(".tag_cell").draggable({
zIndex: 999
});
Я бы также рассмотрел настройку addClasses, чтобы плагин не добавлял все те раздражающие классы, которые тратят впустую скорость процессора.
ОБНОВЛЕНИЕ: У меня НОВОЕ РЕШЕНИЕ
Хорошо, немного поиграв с этим, я пришел к следующему: опция прокрутки не мешает ребенку быть скрытым с переполнением. Я прочитал некоторые другие сообщения, и я не могу найти единственное решение. Но я придумал что-то вроде обходного пути, чтобы выполнить работу.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.0");
google.load("jqueryui", "1.7.2");
google.setOnLoadCallback(OnLoad);
function OnLoad(){
var dropped = false;
$(".tag_cell").draggable({
addClasses: false,
revert: 'invalid',
containment: '#tagFun_div_main',
helper: 'clone',
appendTo: '#tagFun_div_helper',
start: function(event, ui) {
dropped = false;
$(this).addClass("hide");
},
stop: function(event, ui) {
if (dropped==true) {
$(this).remove();
} else {
$(this).removeClass("hide");
}
}
});
$("#tf_dropBox").droppable({
accept: '.tag_cell',
hoverClass: 'tf_dropBox_hover',
activeClass: 'tf_dropBox_active',
drop: function(event, ui) {
dropped = true;
$.ui.ddmanager.current.cancelHelperRemoval = true;
ui.helper.appendTo(this);
}
});
}
</script>
<style>
div#tagFun_div_main { display:block; width:800px; height:400px; margin:auto; padding:10px; background:#F00; }
div#tf_div_tagsReturn { display:block; width:200px; height:100%; float:left; overflow:auto; background:#000; }
div#tf_div_tagsDrop { display:block; width:200px; height:100%; float:right; background:#0F0; }
div#tf_dropBox { display:block; width:100%; height:250px; background:#F0F; }
span.tag_cell { display:block; width:25px; height:25px; margin:1px; float:left; cursor:pointer; background:#0FF; z-index:99; }
span.tag_cell.hide { display:none; }
div#tf_dropBox.tf_dropBox_hover { background:#FFF !important; }
div#tf_dropBox.tf_dropBox_active { background:#333; }
</style>
</head>
<body>
<div id="tagFun_div_main">
<div id="tf_div_tagsReturn">
<span class="tag_cell"></span>
<span class="tag_cell"></span>
<span class="tag_cell"></span>
<span class="tag_cell"></span>
<span class="tag_cell"></span>
<span class="tag_cell"></span>
<span class="tag_cell"></span>
<span class="tag_cell"></span>
<span class="tag_cell"></span>
<span class="tag_cell"></span>
<span class="tag_cell"></span>
</div>
<div id="tf_div_tagsDrop">
<div id="tf_dropBox"></div>
</div>
</div>
<div id="tagFun_div_helper">
<!-- this is where the helper gets appended for temporary use -->
</div>
</body>
</html>
Я вставил весь свой код, чтобы вы могли его опробовать. Вот краткое описание:
Когда вы начинаете перетаскивать элемент, он скрывает оригинал, клонирует его, а затем добавляет клон в контейнер за пределами области переполнения. После удаления он удаляет оригинал и перемещает клона в зону сброса. Отлично, теперь мы исправили проблему переполнения, но столкнулись с некоторыми другими. Когда вы бросаете предмет-клон в зону выпадения, он исчезает. Чтобы этого не случилось, я использовал этот метод:
$.ui.ddmanager.current.cancelHelperRemoval = true;
Теперь мы остановили удаление помощника, но он остается в "div # tagFun_div_helper", пока снова появляется оригинальный перетаскиваемый элемент.
ui.helper.appendTo(this);
Это переведет помощника из "div # tagFun_div_helper" в нашу зону удаления.
dropped = true;
Это скажет нашей функции остановки удалить оригинальный элемент из группы вместо удаления класса ".hide". Надеюсь, это поможет!