Перетаскиваемые элементы скрываются, если проходят мимо своего контейнера

У меня есть несколько перетаскиваемых элементов в левом меню, которые мне нужно сделать перетаскиваемыми в правый контейнер #mainDiv. Перетаскивание работает нормально, но когда я начинаю перетаскивать элемент, он скрывается, когда проходит его контейнер. Я знаю, это потому, что у родителя перетаскиваемых элементов установлен position: relative;. Если я удалю это, все будет работать нормально, но мне нужен position: relative; для других целей. Как исправить проблему с видимостью и сохранить свойство position? Вот рабочий пример:

https://jsfiddle.net/vaxobasilidze/02g2ggt9/2/

Перетащите «элемент 1» и «элемент 2». Они скрыты, потому что в их контейнерах установлен position: relative;, но если вы перетащите «элемент 3» и «элемент 2», они будут видны, как и должны быть. Как сделать все эти элементы видимыми при перетаскивании, не удаляя свойство position?

$('#deviceName li').draggable({
                helper: 'clone',
                revert: 'invalid'
            });
            $('#interface li').draggable({
                helper: 'clone',
                revert: 'invalid'
            });
            $('#display li').draggable({
                helper: 'clone',
                revert: 'invalid'
            });
            $('#output li').draggable({
                helper: 'clone',
                revert: 'invalid'
            });
            $('#streams li').draggable({
                helper: 'clone',
                revert: 'invalid'
            });
            function foo(){
                $('.foo').each(function() {
                    $(this).draggable({
                        stack: '.foo'
                    });
                });
            }
            var fooCount = $('.foo').length;
            $('#mainDiv').droppable({
                drop: function(event, ui) {
                    if (!ui.draggable.hasClass('foo')) {
                        var Class = ui.draggable.attr("class");
                        var title = ui.draggable.text().trim();
                        var item = $('<table class = "foo elementTable ' + Class + '" name = "' + title + '" id = "'+(fooCount+1)+'"><tr class = "tableHeader"><th class = "thClass"><button class = "settings">set</button>' + title + '<span class = "close">x</span></th></tr><tr><td class = "add"><span class = "addList">Add new link</span></td></tr></table>');
                        $(this).append(item);
                        fooCount += 1;
                        foo();
                    }
                }
            });

html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: #2c2c2c;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJjMmMyYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM3JSIgc3RvcC1jb2xvcj0iIzNkM2QzZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iIzM1MzUzNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY2JSIgc3RvcC1jb2xvcj0iIzM1MzUzNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMzEzMTMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #2c2c2c), color-stop(37%, #3d3d3d), color-stop(66%, #353535), color-stop(66%, #353535), color-stop(100%, #131313));
    background: -webkit-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
    background: -o-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
    background: -ms-linear-gradient(left, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
    background: linear-gradient(to right, #2c2c2c 0%, #3d3d3d 37%, #353535 66%, #353535 66%, #131313 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c2c2c', endColorstr='#131313', GradientType=1);
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    color: #b8c0c8;
    background: rgba(0, 0, 0, 0.3);
}

#leftDiv {
    display: inline-block;
    width: 15%;
    height: 100%;
    border-right: 3px solid rgba(0,0,0,0.2);
    box-sizing: border-box;
    float: left;
    margin: 0;
    padding: 0;
    overflow: auto;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.33);
}

#deviceInfo {
    min-height: auto;
    border-bottom: 3px solid rgba(0,0,0,0.2);
    padding: 3px;
    resize: vertical;
    overflow: auto;
}

#menu {
    padding: 0;
    margin: 0;
    margin-bottom: 5px;
    list-style-type: none;
}

#menu li {
    list-style: none;
    padding: 2px;
    border-radius: 4px;
    margin-top: 1px;
}

#menu li span {
    display: block;
    width: 100%;
    min-height: 20px;
    line-height: 20px;
    text-align: center;
    box-shadow: 0 2px 2px rgba(0,0,0,0.26);
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
    -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
    cursor: pointer;
}

#menu li ul {
    padding: 0;
    list-style-type: none;
    overflow: hidden;
}

#menu li ul li {
    width: 100%;
    max-width: 250px;
    text-align: center;
    min-height: 20px;
    line-height: 20px;
    margin: auto;
    border-bottom: 1px solid rgba(0,0,0,0.3);
    cursor: move;
}

#menu li ul li:first-child {
    margin-top: 2px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

#menu li ul li:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom: none;
}

#settingsDiv {
    margin: 0;
    width: 100%;
    min-height: 10px;
    box-sizing: border-box;
    margin: 0;
    padding: 3px;
    overflow: auto;
}
#mainDiv {
    display: inline-block;
    width: 85%;
    min-height: 100%;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin: 0;
    overflow: auto;
    padding: 3px;
}

.foo {
    min-width: 250px;
    width: auto;
    text-align: center;
    min-height: 30px;
    border: 1px solid #515151;
    border-radius: 6px;
    position: absolute;
    padding: 0;
    overflow: hidden;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.33);
    box-shadow: 5px 5px rgba(0,0,0, 0.1);
}

.thClass {
    display: block;
    min-width: 150px;
    width: 102%;
    margin-left: -3px;
    text-align: center;
    box-shadow: 0 2px 2px rgba(0,0,0,0.26);
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
    -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
    margin-top: -2px;
    min-height: 30px;
    line-height: 30px;
    font-size: 19px;
    cursor: move;
}

.header{
    margin-left: 17px;
}

.tableBody {
    display: block;
    min-height: 25px;
    text-align: center;
    width: 102%;
    margin-left: -2px;
    cursor: default;
}

.foo tbody tr td {
    display: block;
    line-height: 25px;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}

.addList{
    width: 100px;
    cursor: pointer;
}

.addList:hover{
    text-decoration: underline;
    color: antiquewhite;
}

.devInfo {
    max-height: 150px;
    overflow-y: auto !important;
}

#deviceName {
  position: relative;
}

#interface {
  position: relative;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head runat = "server">
    <title>Test</title>
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<!DOCTYPE html>
<head runat = "server">
    <title>Test</title>
    <script src = "jquery-3.2.1.js"></script>
    <script src = "jquery-ui.js"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.1.8/jsPlumb.js"></script>
    <style>
        .jsplumb-endpoint {
            z-index: 10;
        }
    </style>
</head>
<body>
    
    <div id = "leftDiv">
        <div id = "deviceInfo">
            <ul id = "menu">
            <li>Device Name
                <ul id = "deviceName">
                    <li>
                      item 1
                    </li>
                </ul>
            </li>
            <li>Interface
                <ul id = "interface">
                    <li>
                      item 2
                    </li>
                </ul>
            </li>
            <li>Display
                <ul id = "display">
                    <li>
                      item 3
                    </li>
                </ul>
            </li>
            <li>Output
                <ul id = "output">
                    <li>
                      item 4
                    </li>
                </ul>
            </li>
        </ul>
        </div>
        <div id = "settingsDiv">
            
        </div>
    </div>
    <div id = "mainDiv">
        
    </div>

Предлагаю добавить zIndex: 1000. Предметы отстают от других предметов.

— 29.05.2018 21:47

@Twisty У меня установлен z-index 1500, я даже пытался установить более высокий z-index для перетаскиваемого вспомогательного клона, но не работает

— 30.05.2018 08:47

Не смотрите этого в своем коде или примере. Где это определяется?

— 30.05.2018 09:00

@Twisty В моем коде. Мой проект слишком велик, чтобы создать его точную копию, но поскольку z-index не помог, я не стал его добавлять. Кстати, у меня есть другая идея, а если я при перетаскивании поставлю "position: none"? Я пытаюсь реализовать это

— 30.05.2018 09:04

Где параметр zIndex установлен в вашем перетаскиваемом элементе? Это конкретный вариант. Не уверен, что это даст.

— 30.05.2018 09:12

@Twisty Вот так: $ ('# widget li'). Draggable ({helper: 'clone', revert: 'invalid', drag: function (e, ui) {$ (ui.helper) .css ({'z -index ':' 1500 '});}, начало: функция (e, ui) {$ ('. draggableItems '). css ({' position ':' none '});}});

— 30.05.2018 09:23

@Twisty Но установка такой позиции не работает. Позиция: на самом деле ничего не работает, пробовал вручную. Теперь мне нужно изменить это программно

— 30.05.2018 09:24

Я бы не стал так настраивать z-index через CSS. Я бы посоветовал установить его в определении перетаскиваемого: $('#widget li').draggable({ zIndex: 1500 }); Смотрите: api.jqueryui.com/draggable/#option-zIndex

— 30.05.2018 19:07

@Twisty Я попробовал упомянутый вами метод, не сработал, но я решил проблему. Просто использовал js, чтобы установить для свойства position пустое значение, когда пользователь начинает перетаскивать, а затем снова сделать его относительным. оно работает

— 31.05.2018 11:49

javascript jquery html css jquery-ui

29.05.2018 15:38

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 1

Я нашел решение:

$('#widget li').draggable({
      helper: 'clone',
      revert: 'invalid',
      start: function(e, ui) {
        $('.draggableItems').css({
          'position': '' //Disable position property when user starts dragging
        });
        $('.ui-draggable-dragging').removeClass('.ui-draggable-dragging');
      },
      stop: function() {
        $('.draggableItems').css({
          'position': 'relative' //Setting potion relative back again after user drops item
        });
      },
      drag: function() {
        $(this).css({
          'z-index': '1500'
        });
      }
    });

Я просто удаляю свойство позиции при перетаскивании и добавляю его позже.

31.05.2018 11:54