拖放一個.PNG圖像在JavaScript中超過另一個

我有一個包含2個表格的HTML頁面，每個表格有6行，每行包含6個（90px乘90px）的圖像。所有圖像都是.PNG，理想情況下，我希望能夠拖動一張圖像，並將其放入另一張圖像並覆蓋另一張圖像。拖放一個.PNG圖像在JavaScript中超過另一個

的HTML看起來像這樣：

<div id="play-area"> 
     <table class="piecetray"> 
      <tr> 
       <td><img src="media/hex1.png"></td> 
       <td><img src="media/hrt1.png"></td> 
       <td><img src="media/pent1.png"></td> 
       <td><img src="media/up1.png"></td> 
       <td><img src="media/tri1.png"></td> 
       <td><img src="media/star1.png"></td> 
      </tr> 
      <tr> 
       <td><img src="media/star1.png"></td> 
       <td><img src="media/tri1.png"></td> 
       <td><img src="media/up1.png"></td> 
       <td><img src="media/pent1.png"></td> 
       <td><img src="media/hrt1.png"></td> 
       <td><img src="media/hex1.png"></td> 
      </tr> 
      <tr> 
       <td><img src="media/hex1.png"></td> 
       <td><img src="media/hrt1.png"></td> 
       <td><img src="media/pent1.png"></td> 
       <td><img src="media/up1.png"></td> 
       <td><img src="media/tri1.png"></td> 
       <td><img src="media/star1.png"></t

，爲表中的CSS ...

.gametray { 
    background-color: black; 
    border: 3px solid black; 
    display: inline-block; 
    margin-left: 20px; 
} 

.gametray td { 
    background-color: #003399; 
    border: 1px solid black; 
} 

.gametray img { 
    display: block; 
    height: 90px; 
    width: 90px; 
} 

.piecetray { 
    background-color: #0052CC; 
    border: 3px solid black; 
    display: inline-block; 
    margin-right: 20px; 
} 

.piecetray td { 
    border: 1px solid transparent; 
} 

.piecetray img { 
    display: block; 
    height: 90px; 
    width: 90px; 
}

在JavaScript我在爲拉所有圖片如下：

Perfection.view = { 
timer  : currentTime = document.getElementById("timer"), 
**dragPieces : document.querySelectorAll(".piecetray td img"), 
**targetPieces : document.querySelectorAll(".gametray td img"), 
updateTime : function(count) { 
        this.timer.innerHTML = count; 
       }

我玩過創建函數來處理： allowDrop（preventDefault（））處理拖動事件和處理放置事件。

我正在使用的代碼不起作用。在Web控制檯中沒有錯誤。我使用的功能如 function handleDrop(event) { event.preventDefault(); var piece = event.dataTransfer.getData("text", event.target); 在appendChild的代碼中也有一行。我還沒有發佈實際代碼的原因是因爲我從我的手機上發佈了這個代碼。

設置我的事件處理程序通過執行類似

測試圖像中的一個

Perfection.view.dragPieces [1] .ondrop = handleDrop;

我得到的最接近的是，我測試的圖像會拖動，當我放下它時，它會從原始位置消失，並且目標表上的隨機位置（方形）會變黑，很不幸，這不是我要去哪裏

任何人都可以幫助我嗎？

乾杯

來源

2015-03-13 coopwatts

請編輯你的問題來描述*你的代碼不工作。如果您收到錯誤消息，請添加錯誤消息。如果您的行爲不正確，請描述行爲。 – 2015-03-13 16:37:04

我能夠當丟棄事件發生時添加一個類來實現這一點，然後設置TD元素和新.matched類的屬性使用z索引，使圖像疊加...這個。就像...

function handleDrop(event) { 
event.preventDefault(); 
var piece = document.querySelector(".selected"); 
var target = event.target; 
var targetParent = event.target.parentElement; //this gets the td element 
    if (getName(piece) === getName(target)) { 
     targetParent.appendChild(piece); 
     piece.classList.remove("selected"); 
     piece.classList.add("matched"); //this class gets added 
    }

}

而對於TD元素和新的類CSS：

.gametray td { 
    position: relative; 
} 

table td .matched { 
    position: absolute; 
    z-index: 2; 
    top: 0px; 
    left: 0px; 
}

來源

2015-03-17 01:12:35 coopwatts

拖放一個.PNG圖像在JavaScript中超過另一個

回答

相關問題