0

大家，早安，

我需要创建一个轮盘赌桌，您可以在其中仅使用 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 不适用于此代码？

4

1 回答 1

2

我想你会喜欢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
});

我在这里写了一篇博客文章来解释如何使用它：使用 interact.js 拖放 snap to grid。该帖子还链接到交互式演示。

于 2013-04-15T01:54:47.513 回答