Перетащите из DOM, поместите в Canvas или SVG

Question

Я собираюсь создать инструмент, который позволит пользователям перетаскивать элементы из списка и помещать их на холст для построения дерева / организационной диаграммы.

Интересно, можно ли вообще перетащить обычный элемент?li-node на canvas / svg и определите, где на холсте и какой элемент удаляется?

Может быть, у вас есть лучшее предложение, чем использовать canvas / svg?Мое единственное требование - чтобы пользователь мог интуитивно перетаскивать элементы из списка для построения графика / организационной диаграммы.

Answer 1

Да, можно перетащить на / поверх другого элемента и определить, где на этом элементе вы находитесь. Для SVG вы захотите использовать код, подобный следующему, для преобразования из координат мыши в локальное пространство холста:

function mouseXY(evt){
  var mxy = svg.createSVGPoint();
  mxy.x = evt.clientX;
  mxy.y = evt.clientY;
  return mxy.matrixTransform(svg.getScreenCTM().inverse());
}

Для Canvas вы можете убедиться, что .style.offsetWidth холста совпадает с width, или преобразовать их между собой, чтобы попасть в локальное пространство. (Только если вы изменяете размер отображения вашего холста.)

Одна из лучших особенностей SVG по сравнению с Canvas, однако, заключается в том, что это "режим с сохраненной графикой" API рисования. Помимо прочего, это позволяет вам помещать обработчики событий на сами SVG-элементы и обнаруживать mouseover события на них, вместо того, чтобы пытаться определить по координатам, над каким объектом вы находитесь. (Последнее - то, что вам нужно сделать с Canvas, так как на холсте нет «объектов», только пиксели краски, которые сразу высохли, как только вы их нарисовали.)

Я лично предлагаю встраивать SVG напрямую в XHTML, а не через <object> или <img>, чтобы у вас был один document для работы. Вот пример моей страницы, которая встраивает несколько SVG в одну страницу XHTML: http://phrogz.net/SVG/convert_path_to_polygon.xhtml

Answer 2

С Рафаэлем вам будет легко Ускорьте разработку, создайте свой SVG и поместите его в Конвертер в

http://irunmywebsite.com/raphael/svgsource.php Пример перетаскивания

http://irunmywebsite.com/raphael/additionalhelp.php?q=bearbones