ドラッグイベント一度だけ発砲

Question

私はHTML5のドラッグ＆ドロップAPIを使ってパズルゲームを作っています。私は3列のグリッドを4列/行で構築し、12個の正方形を与えます。正方形の1つを除くすべての数字には1から11までの数字が含まれます。空の四角形はドロップゾーン、つまり任意の四角形をドラッグできる場所です。

要素がドラッグされると、dataTransfer.setDataはドラッグされている要素のidに設定され、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>

問題は今、最初のドラッグ・アンド・アクションが成功したドロップ、しかし、新しいドロップゾーンに新しい要素をドラッグしようとすると、動作しない、それだけで認識していないということですondragenter、ondragleave、ondragover、およびdropイベントを削除します。

Answer 1

現在のdropzone要素にdragover、dragleave、dropイベントを添付し、dropzone変数を設定する関数を作成することができます。 dropイベントリスナコール関数dataを渡して、現在iddataの要素にdragstartイベントを添付します。

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>