在表格單元格中拖動圖像並跟蹤其位置

我想要拖動表格單元格中的圖像。我怎樣才能修改以下這樣我就可以在另一個上面拖動一張圖片：在jsfiddle 在表格單元格中拖動圖像並跟蹤其位置

function drag(ob) { 
ob.dataTransfer.setData("Text",ob.target.id); } 

function drop(ob) { 
var id = ob.dataTransfer.getData("Text"); 
if (!$(ob.currentTarget).find("img")[0]) 
    ob.target.appendChild(document.getElementById(id)); 
ob.preventDefault();  
} 

function allowDrop(ob) { 
    ob.preventDefault(); 
}

完整代碼此外，是否有可能在下降功能的一些代碼，將顯示所有圖像的文件名（從第1行到第3行），所以我可以將它傳遞給php進行處理？謝謝。

來源

2012-10-21 user1763812

我不完全確定你想要達到的目標。但是，這將允許圖像互相拖曳並移除替換的圖像。還有一個小的div顯示如何跟蹤圖像名稱。

我添加了一個div來跟蹤名稱。你可以很容易地使這個隱藏的領域。

<div id="images"></div>

再變降：

function drop(ob) 
{ 
    var id = ob.dataTransfer.getData("Text"); 
    var t = ob.target; 

    if (ob.target.nodeName == "IMG") 
     t = ob.target.parentNode; 

    t.innerHTML = ""; 
    var img = document.getElementById(id); 
    t.appendChild(img); 

    $('#images').append(img.src + "; ") 

    ob.preventDefault();  
}

http://jsfiddle.net/qgp7N/3/

來源

2012-10-22 02:10:18 kampsj

非常感謝您的時間。我正在製作一個用戶輪流使用的國際象棋遊戲項目。將不會有人工智能參與，但我會檢查是否有有效的舉動。這就是我需要知道每個球員移動後每個球的位置的原因。你認爲這是一個合適的方法來處理它嗎？ – user1763812

我會將板子視爲一個8x8陣列，然後在一舉一動中驗證/更新陣列，然後將陣列綁定到UI。幸運的是，很多人都做了國際象棋遊戲。看看http://diovo.com/2011/12/chess-programming-in-javascript-part-1/ – kampsj

感謝您的建議。在發佈之前我做了很多研究，甚至看到了你建議的鏈接。不幸的是，該鏈接只能通過2節課，並不能解釋我特別尋找的內容，這就是如何處理用戶的動作。大多數編碼將在PHP中完成（實際上，我將使用數組來存儲板），我只是不知道如何處理板顯示，javascript/jquery拖放以及哪個部分被移動。這裏發佈的小板只是爲了學習如何顯示板子。任何其他提示/建議？ – user1763812

在表格單元格中拖動圖像並跟蹤其位置

回答

相關問題