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轮盘赌桌，拖放

回答

相关问题