1
我正在研究一種用HTML5拖放api的益智遊戲。我建立了一個3行的網格,每行4列給我12個方格。除了其中一個方格外,其餘的方格都包含1到11的數字。空方格意味着放置區域,即可以拖入任何方格的地方。Drag Events只發射一次
當一個元素被拖動時,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和下降事件了。
完美。這工作。但是,我仍然無法理解爲什麼/它是如何工作的以及爲什麼我的代碼無法工作。 – ibnhamza
@ibnhamza _「現在的問題是,第一次拖放操作是成功的,但是,嘗試在新的拖放區中拖放新元素不起作用,它只是無法識別ondragenter,ondragleave,ondragover和放棄事件了。「_請參閱[Node.cloneNode()](https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode)_」克隆節點複製其所有屬性和它們的值,包括內部(內聯)偵聽器,它不會複製使用'addEventListener()'或者賦給元素屬性的事件偵聽器。「_ – guest271314
很好的解釋。謝謝 – ibnhamza