Почему перетаскивание (перетаскивание) элемента приводит к частичному исчезновению dropzone (div)?

Question

Почему перетаскивание (перетаскивание) элемента приводит к частичному исчезновению dropzone (div)?

1

Использование перетаскивания HTML5 при перетаскивании элемента dropzone частично исчезает из пользовательского интерфейса, как показано на снимке экрана. Частичный недостающий div на изображении имеет красную границу. Когда я удаляю тег "hr", из приведенного ниже кода он работает, и div не исчезает при перетаскивании элемента! Это происходит только в браузере Chrome. Весь код приведен ниже. Кто-нибудь знает, почему это происходит?

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>

<style>
    .objects {
        display: inline-block;
        background-color: #FFF3CC;
        border: #DFBC6A 1px solid;
        width: 50px;
        height: 50px;
        margin: 10px;
        padding: 8px;
        font-size: 18px;
        text-align: center;
        box-shadow: 2px 2px 2px #999;
        cursor: move;
    }

    #drop_zone {
        background-color: #EEE;
        border: #f00 1px solid;
        width: 280px;
        height: 200px;
        padding: 8px;
        font-size: 18px;
    }
</style>

<script>
        function _(id){
           return document.getElementById(id);
        }
        var droppedIn = false;
        function drag_start(event) {

             _('app_status').innerHTML = "Dragging the " + 
event.target.getAttribute('id');

            event.dataTransfer.dropEffect = "move";
            event.dataTransfer.setData("text", 
event.target.getAttribute('id') );
        }
        function drag_enter(event) {
            _('app_status').innerHTML = "You are dragging over the 
"+event.target.getAttribute('id');
        }
        function drag_leave(event) {
            _('app_status').innerHTML = "You left the 
"+event.target.getAttribute('id');
        }
        function drag_drop(event) {
            event.preventDefault(); /* Prevent undesirable default behavior 
while dropping */
            var elem_id = event.dataTransfer.getData("text");
            event.target.appendChild( _(elem_id) );
            _('app_status').innerHTML = "Dropped "+elem_id+" into the 
"+event.target.getAttribute('id');
            _(elem_id).removeAttribute("draggable");
            _(elem_id).style.cursor = "default";
            droppedIn = true;
        }
        function drag_end(event) {
            if(droppedIn == false){
                _('app_status').innerHTML = "You let the 
"+event.target.getAttribute('id')+" go.";
            }
            droppedIn = false;
        }
        function readDropZone(){
    alert('dropzone');
            for(var i=0; i < _("drop_zone").children.length; i++){
                alert(_("drop_zone").children[i].id+" is in the drop zone");
            }
            /* Run Ajax request to pass any data to your server */
        }
</script>

</head>
<body>

<h2 id="app_status">App status...</h2>

<h1>Drop Zone</h1>

<div id="drop_zone" ondragenter="drag_enter(event)" 
ondrop="drag_drop(event)" ondragover="return false" 
ondragleave="drag_leave(event)"></div>
<div id="object1" class="objects" draggable="true" 
ondragstart="drag_start(event)" ondragend="drag_end(event)">object 1</div>
<div id="object2" class="objects" draggable="true" 
ondragstart="drag_start(event)" ondragend="drag_end(event)">object 2</div>
<div id="object3" class="objects" draggable="true" 
ondragstart="drag_start(event)" ondragend="drag_end(event)">object 3</div>

<hr />
<br />
<button onclick="readDropZone()">Get Object Data</button>


</body>
</html>

KeelRisk 06 нояб. 2017, в 02:08

Источник

Теги:

javascript

html5

drag-and-drop

1 ответ

Ещё вопросы

camelsWriteInCamelCase · Accepted Answer · 2017-11-06T00-43-00.000Z

В моих тестах, даже если я удалил <hr/>, ошибка все еще воспроизводилась. Я заметил, что это происходит после изменения текста h2#app_status. Если вы оберните div#drop_zone и все следующие элементы, такие как div#object... с div, который имеет inline-block как стиль отображения, тогда такого исчезновения не будет.

<style>
   #drop-zone-wrapper {display: inline-block;}
</style>

<div id="drop-zone-wrapper">
    <div id="drop_zone" ondragenter="drag_enter(event)"
         ondrop="drag_drop(event)" ondragover="return false"
         ondragleave="drag_leave(event)"></div>
    <div id="object1" class="objects" draggable="true"
         ondragstart="drag_start(event)" ondragend="drag_end(event)">object 1</div>
    <div id="object2" class="objects" draggable="true"
         ondragstart="drag_start(event)" ondragend="drag_end(event)">object 2</div>
    <div id="object3" class="objects" draggable="true"
         ondragstart="drag_start(event)" ondragend="drag_end(event)">object 3</div>
</div>