Javascript рулетку, перетащить

Доброе утро всем,Javascript рулетку, перетащить

Мне нужно создать таблицу в рулетку, где вы можете перетащить чип покера по количеству (графически), используя только JavaScript/CSS/HTML.

Вопрос 1: Какой был бы лучший подход для этого?

Вопрос 2: Я думал использовать 2 для циклов для инициализации div со всеми числами в них, а затем использовать перетаскивание (http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx), чтобы «привязать» изображение чипа покера к ближайшему div, когда он выпущен. Euhm ... Как узнать, где можно привязать изображение, не используя сотни if/else?

спасибо! Хорошего дня! :)

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>

Кто-нибудь знает, почему OnDragOver/OnDrop не работает с этим кодом?

источник

2013-04-10 problemo

Возможно, вы захотите использовать перетаскивание HTML5, а не то, что в этой статье. Я думаю, что это дает вам целевой элемент капли, иначе, чем сотни if/elses (!), Вы должны пропустить все элементы, которые у вас есть, и выработать, если точка падения находится в пределах этого элемента или какой элемент он близок к тому, если его нет. – Rup

Прохладный, я посмотрел на него и попытался его реализовать, но ondragstart, похоже, не работает с appendChild, хотя он работает с onclick. Любая идея почему? Я обновил сообщение с кодом. – problemo

Я думаю, вы хотели бы interact.js. Это автономный модуль перетаскивания, изменения размера и мультитач, который я написал. Недавно я добавил привязку; он позволяет вам привязываться к настраиваемой сетке или более подходящим образом в этом случае, настраивать привязки.

Чтобы 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. Сообщение также ссылается на интерактивную демонстрацию.

источник

2013-04-15 01:54:47 taye

Привет, добро пожаловать в переполнение стека! Ссылка на потенциальное решение всегда приветствуется, но, пожалуйста, добавьте контекст вокруг ссылки, чтобы у ваших коллег было некоторое представление о том, что это такое и почему оно есть. Всегда указывайте наиболее важную часть важной ссылки. Представьте, что страница перемещена на другой сервер или изменяется прямая ссылка - будущие пользователи не смогут воспользоваться ответом. Пожалуйста, взгляните на [как ответить] (http://stackoverflow.com/questions/how-to-answer). – Jesse

Спасибо, выглядит прост в использовании. Попробуй, когда я вернусь домой. – problemo

Я закончил использовать jquery, так как мне также нужны были другие функции, но спасибо в любом случае! – problemo

Javascript рулетку, перетащить

ответ

Смежные вопросы