Перетаскивание событий Только стрельба

Question

Я работаю над некой головоломкой с перетаскиванием мышью HTML5. Я строю сетку из 3 строк с 4 столбцами на строку, дающую мне двенадцать квадратов. Все, кроме одного из квадратов, содержат некоторые числа от 1 до 11. Пустой квадрат должен быть dropzone i.e, где любой квадрат можно перетащить.

Когда элемент перетаскивается, dataTransfer.setData устанавливается в идентификатор элемента, который перетаскивается, когда событие ondrop получает данные с использованием dataTransfer.getData(), результат которого используется для запроса dom для перемещаемого элемента, затем клонируется, после чего капля-зона теперь заменяется клонированным узлом. Источник, из которого идет перетаскиваемый элемент, также заменяется на dropzone.

var squares = document.querySelectorAll(".item"); 
 
var dropzone = document.querySelector(".col-lg-3.dropzone"); 
 

 
function startDrag(e){ 
 
    e.dataTransfer.setData("text", e.target.id); 
 
    console.log(e.target) 
 

 
} 
 

 
function overDrag(e){ 
 
    e.preventDefault(); 
 
    e.target.classList.toggle("dropzone-active"); 
 

 
} 
 

 
function leaveDrag(e){ 
 
    e.preventDefault(); 
 
    e.target.classList.toggle("dropzone-active"); 
 
} 
 

 
function dropItem(e){ 
 
    e.preventDefault(); 
 
    var data = e.dataTransfer.getData("text"); 
 
    var draggedElem = document.getElementById(data) 
 
    var clone = draggedElem.cloneNode(true); 
 
    var emptyzone = dropzone.cloneNode(false); 
 
    emptyzone.className = "col-lg-3 dropzone"; 
 
    draggedElem.parentNode.replaceChild(emptyzone,draggedElem); 
 

 
    clone.id = data; 
 
    e.target.parentNode.replaceChild(clone, e.target); 
 
} 
 

 

 
for(var i=0; i<squares.length; i++){ 
 
    squares[i].addEventListener("dragstart", startDrag, false); 
 
} 
 
dropzone.addEventListener("dragover", overDrag, false); 
 
dropzone.addEventListener("dragleave", leaveDrag, false); 
 
dropzone.addEventListener("drop", dropItem, false);

\t #gameZone{ 
 
\t \t width:800px; 
 
\t \t height:500px; 
 
\t \t background-color: rgba(0,0,0,.5); 
 
\t \t margin: 0 auto; 
 
\t \t padding:15px; 
 
\t \t position:relative; 
 
\t } 
 
\t .item, 
 
\t .dropzone{ 
 
\t \t background-color:red; 
 
\t \t margin-right:10px; 
 
\t \t margin-bottom:15px; 
 
\t \t width:100px; 
 
\t \t height:100px; 
 
\t \t font-size: 2em; 
 
\t \t color:#fff; 
 
\t \t text-align:center; 
 
\t } 
 
\t .drag-active{ 
 
\t \t position:absolute; 
 
\t \t z-index: 10; 
 
\t } 
 
\t .dropzone-active{ 
 
\t \t border:dashed 3px white; 
 
\t } 
 

 
\t .dropzone{ 
 
\t \t background-color:rgba(255,255,255,.6); 
 
\t }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<section id="gameZone"> 
 
\t <div class="row"> 
 
\t \t <div class="col-lg-3 item" id="one" draggable="true">1</div> 
 
\t \t <div class="col-lg-3 item" id="three" draggable="true">3</div> 
 
\t \t <div class="col-lg-3 item" id="two" draggable="true">2</div> 
 
\t \t <div class="col-lg-3 item" id="four" draggable="true">4</div> 
 
\t </div> 
 
\t <div class="row"> 
 
\t \t <div class="col-lg-3 dropzone"></div> 
 
\t \t <div class="col-lg-3 item" id="five" draggable="true">5</div> 
 
\t \t <div class="col-lg-3 item" id="six" draggable="true">6</div> 
 
\t \t <div class="col-lg-3 item" id="nine" draggable="true">9</div> 
 
\t </div> 
 
\t <div class="row"> 
 
\t \t <div class="col-lg-3 item" id="seven" draggable="true">7</div> 
 
\t \t <div class="col-lg-3 item" id="eight" draggable="true">8</div> 
 
\t \t <div class="col-lg-3 item"id="eleven" draggable="true">11</div> 
 
\t \t <div class="col-lg-3 item" id="ten" draggable="true">10</div> 
 
\t </div> 
 
</section>

Сейчас проблема заключается в том, что первый перетащить действие успешно, однако, пытаясь перетащить новый элемент в новом DropZone не работает, он просто не признает ondragenter, ondragleave, ondragover и события drop.

Answer 1

Вы можете создать функцию, чтобы установить переменную dropzone, присоедините dragover, dragleave, drop события на текущий dropzone элемент. В пределах drop функция вызова слушателя события передается data для присоединения dragstart событие к элементу, имеющему в настоящее время iddata.

var squares = document.querySelectorAll(".item"); 
 
var dropzone; 
 

 
//= document.querySelector(".col-lg-3.dropzone"); 
 

 
function startDrag(e) { 
 
    e.dataTransfer.setData("text", e.target.id); 
 
} 
 

 
function overDrag(e) { 
 
    e.preventDefault(); 
 
    e.target.classList.toggle("dropzone-active"); 
 
} 
 

 
function leaveDrag(e) { 
 
    e.preventDefault(); 
 
    e.target.classList.toggle("dropzone-active"); 
 
} 
 

 
function dropItem(e) { 
 
    e.preventDefault(); 
 
    var data = e.dataTransfer.getData("text"); 
 
    var draggedElem = document.getElementById(data) 
 
    var clone = draggedElem.cloneNode(true); 
 
    var emptyzone = dropzone.cloneNode(false); 
 
    emptyzone.className = "col-lg-3 dropzone"; 
 
    draggedElem.parentNode.replaceChild(emptyzone, draggedElem); 
 

 
    clone.id = data; 
 
    e.target.parentNode.replaceChild(clone, e.target); 
 
    setResetDND(data); 
 
} 
 

 

 
for (var i = 0; i < squares.length; i++) { 
 
    squares[i].addEventListener("dragstart", startDrag, false); 
 
} 
 

 
function setResetDND(id) { 
 
    dropzone = document.querySelector(".col-lg-3.dropzone"); 
 

 
    dropzone.addEventListener("dragover", overDrag, false); 
 
    dropzone.addEventListener("dragleave", leaveDrag, false); 
 
    dropzone.addEventListener("drop", dropItem, false); 
 
    if (id) { 
 
    document.getElementById(id) 
 
    .addEventListener("dragstart", startDrag) 
 
    } 
 
} 
 

 
setResetDND();

#gameZone { 
 
    width: 800px; 
 
    height: 500px; 
 
    background-color: rgba(0, 0, 0, .5); 
 
    margin: 0 auto; 
 
    padding: 15px; 
 
    position: relative; 
 
} 
 
.item, 
 
.dropzone { 
 
    background-color: red; 
 
    margin-right: 10px; 
 
    margin-bottom: 15px; 
 
    width: 100px; 
 
    height: 100px; 
 
    font-size: 2em; 
 
    color: #fff; 
 
    text-align: center; 
 
} 
 
.drag-active { 
 
    position: absolute; 
 
    z-index: 10; 
 
} 
 
.dropzone-active { 
 
    border: dashed 3px white; 
 
} 
 
.dropzone { 
 
    background-color: rgba(255, 255, 255, .6); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<section id="gameZone"> 
 
    <div class="row"> 
 
    <div class="col-lg-3 item" id="one" draggable="true">1</div> 
 
    <div class="col-lg-3 item" id="three" draggable="true">3</div> 
 
    <div class="col-lg-3 item" id="two" draggable="true">2</div> 
 
    <div class="col-lg-3 item" id="four" draggable="true">4</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-lg-3 dropzone"></div> 
 
    <div class="col-lg-3 item" id="five" draggable="true">5</div> 
 
    <div class="col-lg-3 item" id="six" draggable="true">6</div> 
 
    <div class="col-lg-3 item" id="nine" draggable="true">9</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-lg-3 item" id="seven" draggable="true">7</div> 
 
    <div class="col-lg-3 item" id="eight" draggable="true">8</div> 
 
    <div class="col-lg-3 item" id="eleven" draggable="true">11</div> 
 
    <div class="col-lg-3 item" id="ten" draggable="true">10</div> 
 
    </div> 
 
</section>