Drag Events只发射一次

Question

我正在研究一种用HTML5拖放api的益智游戏。我建立了一个3行的网格，每行4列给我12个方格。除了其中一个方格外，其余的方格都包含1到11的数字。空方格意味着放置区域，即可以拖入任何方格的地方。

当一个元素被拖动时，dataTransfer.setData被设置为被拖动元素的id，而ondrop事件使用dataTransfer.getData（）获取数据，其结果用于查询被拖动元素的dom，然后在克隆之后，现在将dropzone替换为克隆的节点。拖动元素来源将被替换为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>

现在的问题是，第一拖放操作是成功的，但是，试图在新的悬浮窗拖动一个新的元素是不行的，它只是不承认ondragenter，ondragleave，ondragover和下降事件了。

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>