Javascript roulette table, drag and drop

Question

Good morning everyone,

I need to create a roulette table where you can drag a poker chip on the number(graphically) using only javascript/css/html.

Question 1: What would be the best approach for this?

Question 2: I thought of using 2 for loops to initialize divs with all the numbers in them and then use drag and drop(http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx) to "snap" the poker chip image to the closest div when it is released. Euhm... How would I know where to snap the image without using hundreds of if/else?

Thank you very much! Have a nice day! :)

Update:

<!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>

Does anyone know why ondragover/ondrop doesn't work with this code?

You probably want to use the newer HTML5 drag and drop rather than what's in that article. I think that gives you the target element of the drop, otherwise rather than hundreds of if/elses (!) you should loop through all the elements you have and work out if the drop point is within the bounds of that element, or which element it's closest to if none. — Rup
Cool, I looked at it and tried to implement it but ondragstart doesn't seem to work with appendChild although it works with onclick. Any idea why? I updated the post with the code. — problemo

taye taye · Accepted Answer · 2013-04-15T01:54:47

I think you'd like interact.js. It's a standalone JavaScript drag and drop, resize and multitouch gesture module I wrote. I recently added snapping; it allows you to snap to a custom grid or more suitably in this case, custom anchors.

To make element draggable, you would call interact(element).draggable(true) then bind listeners to dragmove events:

interact(element).bind('dragmove', function (event) {
    // use event.dx, event.dy and normal MouseEvent properties
    // to move the element
});

And to configure the snapping to custom anchors:

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
});

I wrote a blog post explaining how to use it here: Drag and drop snap to grid with interact.js. The post also links to an interactive demo.

Javascript roulette table, drag and drop

1 Answers