jQuery ui перемещаемые элементы, не 'перемещаемые' за пределами прокрутки отделения

Question

jQuery ui перемещаемые элементы, не 'перемещаемые' за пределами прокрутки отделения

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

Это - структура отделений:

<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>

родительское отделение, '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();
        }
    });
});

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

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

ОБНОВЛЕНИЕ:

большое спасибо 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();
        }
    });
});

35

jquery user-interface drag-and-drop scroll

задан ROMANIA_engineer 30 July 2017 в 22:25

1 ответ

Другие вопросы по тегам:

jquery user-interface drag-and-drop scroll

Похожие вопросы:

score 42 · Accepted Answer

Собираетесь ли вы, чтобы позволить более одного экземпляра с вашими объектами Draggable? Затем используйте опцию HELPER и APPEND:

$(".tag_cell").draggable({ 
  helper: 'clone',
  appendTo: 'div#myHelperHolder'
});

Затем в ваших CSS вы можете установить Zindex Of 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». Надеюсь, это поможет!