В настоящее время я использую Raphaël JS (открыт для перехода на jQuery SVG) и jQuery UI, чтобы попытаться создать прототип настольной игры . Это чем-то похоже на Risk в том, что доска представляет собой карту, и вы можете (надеюсь, скоро) перетаскивать части из одной зоны на карте в другую (скажем, из A в B) и бросать их туда. После того, как вы бросили, это вызовет обратный вызов поработать.
Прямо сейчас я застрял, пытаясь получить функциональность перетаскивания. Я хочу перетащить элемент html (div) на элемент SVG. Я не очень знаком с SVG, но насколько я понимаю, есть проблемы, которые необходимо преодолеть, чтобы заставить HTML и SVG DOM работать вместе.
У меня есть две версии, и я пытаюсь заставить пользовательский интерфейс jQuery перетаскивать / опускать их вместе с любой из них. используя jQuery SVG с плагином svgdom + jQuery UI, а другой - просто Raphaël + jQuery UI. Ни один из них, похоже, не запускает событие drop. Насколько мне известно, версия Raphaël doe не работает, потому что манипуляции с dom jQuery не могут взаимодействовать с dom SVG.
JS Fiddle jQuery SVG: http://jsfiddle.net/cqMUL/5/ (вам придется прокрутить вниз, чтобы увидеть элементы SVG, мои извинения).
Другие возможные решения выглядят так:
a) Использование Raphaël с его встроенными функциями drag
и onDragOver
, хотя тогда я использую все SVG и Я пытаюсь использовать HTML-дом для движущихся частей, потому что они будут изображениями (div с фоновым изображением). Вдобавок мне, наверное, придется самому реализовать drop.
б) Попытка использовать перетаскивание HTML5, хотя я не уверен, что это сработает.