Javascript輪盤賭桌，拖放

我需要創建一個輪盤賭桌，你可以用數字（圖形）只用JavaScript/css/html拖動一個撲克籌碼。

問題1：對此最好的方法是什麼？

問題2：我想用2個循環來初始化div中的所有數字，然後使用拖放（http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx）將撲克籌碼圖像「抓拍」到最近的div。歐姆......我怎麼知道在不使用數百個if/else的情況下拍攝圖像的位置？

非常感謝！祝你今天愉快！ :)

更新：

<!DOCTYPE HTML> 
<html> 
<head> 
<style type="text/css"> 
#div1 { 
    width: 20px; 
    height: 40px; 
    padding: 10px; 
    border: 1px solid #aaaaaa; 
} 
#game {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} 
</style> 

</head> 
<body> 

<p>Drag the W3Schools image into the rectangle:</p> 

<br> 
<div id="game"> 
</div> 
<img id="drag1" src="images/c.png" draggable="true" ondragstart="drag(event)" width="336" height="69"> 

<script> 
function allowDrop(ev) 
{ 
ev.preventDefault(); 
} 

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

function drop(ev) 
{ 
ev.preventDefault(); 
var data=ev.dataTransfer.getData("Text"); 
ev.target.appendChild(document.getElementById(data)); 
} 
function dragAlert() { 
    alert("Ondrag"); 
} 
var numberCount = 1; 
var divId = 0; 
var div = document.createElement("div"); 
      div.className = "div1"; 
      /*divId = "id"; 
      divId += numberCount;*/ 
      div.id = "div1"; 
      div.ondrop = function() { 
      drop(event); 
      }; 
      div.ondragover = function() { 
       allowDrop(event); 
      }; 
      document.getElementById("game").appendChild(div); 
      numberCount++; 
</script> 
</body> 

</html>

有誰知道爲什麼ondragover/ondrop不使用此代碼工作？

來源

2013-04-10 problemo

您可能想要使用較新的HTML5拖放操作，而不是該文章中的內容。我認爲這給你的下降的目標元素，否則，而不是數百如果/ elses（！）你應該循環你所有的元素和工作，如果滴點是在該元素的界限內，或者哪個元素如果沒有，最接近。 – Rup 2013-04-10 00:24:54

很酷，我看着它，並試圖實現它，但ondragstart似乎並沒有與appendChild工作，雖然它與onclick工作。任何想法爲什麼？我用代碼更新了帖子。 – problemo 2013-04-10 22:16:04

我想你想要interact.js。這是一個獨立的JavaScript拖放，調整大小和我寫的多點觸控手勢模塊。我最近補充說：它允許你捕捉到一個自定義的網格，或者更適合在這種情況下，自定義錨點。

爲了element拖動，你會打電話interact(element).draggable(true)然後綁定聽衆dragmove事件：

interact(element).bind('dragmove', function (event) { 
    // use event.dx, event.dy and normal MouseEvent properties 
    // to move the element 
});

並配置捕捉到定製的錨：

interact.snap({ 
    mode: 'anchors', 
    anchors: [ 
     {x: 300, y: 100, range: 50}, 
     {x: 100, y: 400, range: 40}, 
     {x: 500, y: 400}, 
     {x: 500, y: 500} 
    ], 
    range: 30 
});

我寫了一篇博客文章，解釋如何在這裏使用它：Drag and drop snap to grid with interact.js。這篇文章還鏈接到一個交互式演示。

來源

2013-04-15 01:54:47 taye

嗨，歡迎來到Stack Overflow！一個可能的解決方案的鏈接總是受歡迎的，但請在鏈接上添加上下文，以便您的同行用戶可以瞭解它是什麼以及它爲什麼在那裏。始終引用重要鏈接中最相關的部分。想象一下，頁面被移動到另一臺服務器，或直接鏈接改變 - 未來的用戶將無法從答案中獲益。請看看[如何回答]（http://stackoverflow.com/questions/how-to-answer）。 – Jesse 2013-04-15 02:19:13

謝謝，看起來很容易使用。當我回家時會嘗試。 – problemo 2013-04-19 18:17:04

我結束了使用jquery，因爲我還需要一些其他功能，但無論如何感謝！ – problemo 2013-04-30 18:01:43

Javascript輪盤賭桌，拖放

回答

相關問題