Использование перетаскивания 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>
В моих тестах, даже если я удалил <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>