Javascript轮盘赌桌，拖放答案

【问题标题】：Javascript roulette table, drag and dropJavascript轮盘赌桌，拖放
【发布时间】：2013-04-01 15:29:33
【问题描述】：

大家早上好，

我需要创建一个轮盘赌桌，您可以在其中仅使用 javascript/css/html 将扑克筹码拖到数字上（以图形方式）。

问题 1：最好的方法是什么？

问题 2：我想过使用 2 个 for 循环来初始化包含所有数字的 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 不适用于此代码？

【问题讨论】：

您可能希望使用较新的 HTML5 拖放功能，而不是那篇文章中的内容。我认为这为您提供了放置的目标元素，否则您应该循环遍历您拥有的所有元素并确定放置点是否在该元素的范围内，或者是哪个元素，而不是数百个 if/else (!)如果没有的话，它最接近。
酷，我查看了它并尝试实现它，但 ondragstart 似乎不适用于 appendChild，尽管它适用于 onclick。知道为什么吗？我用代码更新了帖子。

标签： javascript css html drag-and-drop draggable

【解决方案1】：

我想你会喜欢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。该帖子还链接到一个交互式演示。

【讨论】：

嗨，欢迎来到 Stack Overflow！始终欢迎提供指向潜在解决方案的链接，但请在链接周围添加上下文，以便您的其他用户了解它是什么以及为什么存在。始终引用重要链接中最相关的部分。想象一下，页面被移动到另一台服务器，或者直接链接发生变化——未来的用户将无法从答案中受益。请看how to answer。
谢谢，看起来很容易使用。回家后试试看。
我最终使用了 jquery，因为我还需要一些其他功能，但无论如何谢谢！