Question

大家早上好，

我需要创建一个轮盘赌桌，你可以只使用javascript / css / html在数字（图形）上拖动扑克筹码。

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

问题2：我想使用2 for循环初始化包含所有数字的div，然后使用拖放（http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx）将扑克筹码图像“捕捉”到最近的div释放。 Euhm ......我怎么知道在没有使用数百个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无法使用此代码？

Answer 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。该帖子还链接到互动演示。

Javascript轮盘赌桌，拖放

1 个答案: