Javascript轮盘赌表，拖放

Javascript roulette table, drag and drop

本文关键字：拖放 Javascript      更新时间：2023-09-26

大家早上好，

我需要创建一个轮盘赌表，你可以在数字上拖一个扑克筹码(图形化)只使用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不工作与此代码?

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

我写了一篇博文来解释如何使用它:用interaction .js拖放snap到网格。

相关文章：