JQuery ui перетаскиваемые элементы не "перетаскиваются" вне прокрутки div

У меня есть много элементов (плавающие теги href) в div с заданной высотой/шириной, с прокруткой, установленной в overflow: auto в CSS.

Это структура divs:

<div id="tagFun_div_main">
<div id="tf_div_tagsReturn">
    <!-- all the draggable elements go in here, the parent div scolls -->
</div>
<div id=" tf_div_tagsDrop">
    <div id="tf_dropBox"></div>
</div></div>

родительский div, 'tf_div_tagsReturn' и 'tf_div_tagsDrop' будут в конечном счете плавать рядом друг с другом.

Вот jQuery, который запускается после того, как все "перетаскиваемые" элементы были созданы с именем класса "tag_cell",:

$(function() {
    $(".tag_cell").draggable({ 
        revert: 'invalid', 
        scroll: false,
        containment: '#tagFun_div_main'
    });
    $("#tf_dropBox").droppable({
        accept: '.tag_cell',
        hoverClass: 'tf_dropBox_hover',
        activeClass: 'tf_dropBox_active',
        drop: function(event, ui) {
            GLOBAL_ary_tf_tags.push(ui.draggable.html());
            tagFun_reload();
        }
    });
});

как я уже говорил выше, перетаскиваемые элементы перетаскиваются в div 'tf_div_tagsReturn', но они визуально не перетаскиваются за пределы этого родительского div. Стоит отметить, что если я перетаскиваю один из перетаскиваемых элементов и перемещаю мышь над droppable div, с id 'tf_dropBox', тогда запускается hoverclass, я больше не могу видеть перетаскиваемый элемент.

Это мой первый запуск при использовании jQuery, поэтому, надеюсь, я просто пропущу что-то супер очевидное. Я до сих пор не читал документацию и поисковые форумы: (

UPDATE:

большое спасибо Jabes88 за предоставление решения, которое позволило мне достичь той функциональности, которую я искал. Вот что мой jQuery выглядел так:

$(function() {
    $(".tag_cell").draggable({ 
        revert: 'invalid', 
        scroll: false,
        containment: '#tagFun_div_main',
        helper: 'clone',
        start : function() {
        this.style.display="none";
        },
        stop: function() {
        this.style.display="";
        }
    });
    $(".tf_dropBox").droppable({
        accept: '.tag_cell',
        hoverClass: 'tf_dropBox_hover',
        activeClass: 'tf_dropBox_active',
        drop: function(event, ui) {
            GLOBAL_ary_tf_tags.push(ui.draggable.html());
            tagFun_reload();
        }
    });
});

Ответ 1

Вы собираетесь разрешить несколько экземпляров с вашими перетаскиваемыми объектами? затем используйте опцию helper и append:

$(".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". Надеюсь, что это поможет!

Ответ 2

В моем случае это решило это для меня и прекрасно работает!

ОБНОВЛЕНО

$(".amigo").draggable({
            revert: "invalid" ,
            helper: function(){
                $copy = $(this).clone();
                return $copy;},
            appendTo: 'body',
            scroll: false
        });