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