0

Все события перетаскивания срабатывают, кроме события drop. Все события я завершаю resaltом как сказано здесь. Все эффекты прописываю. И вообще, вроде, всё делаю правильно.

var lItems = Array.from(document.getElementById('lList').getElementsByTagName("LI"));
lItems.forEach(layerProp);

function layerProp(item, i, arr) {
  item.ondragstart = function(event) {
    var target = event.target;
    item.style.opacity = "0.5"
    event.dataTransfer.effectAllowed = 'move';
    window.lr = item
  }
  item.ondragend = function(event) {
    item.style.opacity = "1"
    return true;
  }
  item.ondragleave = function(event) {
    this.classList.remove('over');
    return;
  }
  item.ondragenter = function(event) {
    this.classList.add('over');
    event.dataTransfer.dropEffect = "move"
    event.returnValue = false;
    return;
  }
  item.ondrop = function(event) {
    event.dataTransfer.dropEffect = "move"
    event.target.parentNode.insertBefore(lr, this)
    event.returnValue = false;
    return;
  }
}
.window {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  font-size: 12px;
  border-radius: 3px;
  padding: 5px 10px 5px 10px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  display: inline-block;
  position: absolute;
  border: 1px solid #3d3d3d;
  background-color: #575757;
}
.window header {
  color: white;
  background-color: #474747;
  padding: 5px 10px 5px 10px;
  margin: -5px -10px 0 -10px;
}
.cross {
  float: right;
  cursor: pointer !important;
}
li {
  color: #FFF;
  list-style: none;
  cursor: pointer;
  text-decoration: none;
}
.drag {
  cursor: move;
}
#Layers {
  top: 0px;
  left: 0px;
  width: 204px;
}
#multiply {
  margin: 12px 0 0 0;
}
.drag-list {
  background: #474747;
  padding: 0px;
  width: 100%;
  height: 208px;
  border: 1px solid #3d3d3d;
  border-radius: 2px;
}
.drag-item {
  margin: 1px;
  background-color: #575757;
  border-radius: 2px;
  border: 0px solid black;
  padding: 3px 3px 3px 6px;
}
.drag-item.over {
  border-top: 1px solid #000;
}
<div class="window" id="Layers">
  <header class="drag">Layers<a class="cross" onclick="closeWin(this)">&#215;</a>
  </header>
  <ul class="drag-list" id="lList">
    <li class="drag-item" id="lr0" draggable="true">слой 0</li>
    <li class="drag-item" id="lr1" draggable="true">cлой 1</li>
    <li class="drag-item" id="lr2" draggable="true">слой 2</li>
  </ul>
</div>

1 ответ 1

2

В моём случае событие ondragover дублируется событием ondragenter, по этому я его проигнорировал, но как оказалось drop не работает без него. Так что я просто добавил:

item.ondragover=function(event){
  event.dataTransfer.dropEffect="move"
  event.returnValue=false;
  return;
}   

var lItems = Array.from(document.getElementById('lList').getElementsByTagName("LI"));
lItems.forEach(layerProp);

function layerProp(item, i, arr) {
  item.ondragstart = function(event) {
    var target = event.target;
    item.style.opacity = "0.5"
    event.dataTransfer.effectAllowed = 'move';
    window.lr = item
  }
  item.ondragend = function(event) {
    item.style.opacity = "1"
    return true;
  }
  item.ondragleave = function(event) {
    this.classList.remove('over');
    return;
  }
  item.ondragenter = function(event) {
    this.classList.add('over');
    event.dataTransfer.dropEffect = "move"
    event.returnValue = false;
    return;
  }
  item.ondragover = function(event) {
    event.dataTransfer.dropEffect = "move"
    event.returnValue = false;
    return;
  }
  item.ondrop = function(event) {
    event.dataTransfer.dropEffect = "move"
    event.target.parentNode.insertBefore(lr, this)
    event.returnValue = false;
    return;
  }
}
.window {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  font-size: 12px;
  border-radius: 3px;
  padding: 5px 10px 5px 10px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  display: inline-block;
  position: absolute;
  border: 1px solid #3d3d3d;
  background-color: #575757;
}
.window header {
  color: white;
  background-color: #474747;
  padding: 5px 10px 5px 10px;
  margin: -5px -10px 0 -10px;
}
.cross {
  float: right;
  cursor: pointer !important;
}
li {
  color: #FFF;
  list-style: none;
  cursor: pointer;
  text-decoration: none;
}
.drag {
  cursor: move;
}
#Layers {
  top: 0px;
  left: 0px;
  width: 204px;
}
#multiply {
  margin: 12px 0 0 0;
}
.drag-list {
  background: #474747;
  padding: 0px;
  width: 100%;
  height: 208px;
  border: 1px solid #3d3d3d;
  border-radius: 2px;
}
.drag-item {
  margin: 1px;
  background-color: #575757;
  border-radius: 2px;
  border: 0px solid black;
  padding: 3px 3px 3px 6px;
}
.drag-item.over {
  border-top: 1px solid #000;
}
<div class="window" id="Layers">
  <header class="drag">Layers<a class="cross" onclick="closeWin(this)">&#215;</a>
  </header>
  <ul class="drag-list" id="lList">
    <li class="drag-item" id="lr0" draggable="true">слой 0</li>
    <li class="drag-item" id="lr1" draggable="true">cлой 1</li>
    <li class="drag-item" id="lr2" draggable="true">слой 2</li>
  </ul>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.