Можно перетащить элемент HTML dom и перетащить на элемент SVG dom?

Question

В настоящее время я использую 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. Похоже, ни один из них не запускает событие выпадения. Насколько я знаю, версия Raphaël не работает, потому что манипуляция dom в jQuery не может взаимодействовать с dom SVG.

JS Fiddle jQuery SVG: http://jsfiddle.net/cqMUL/5/ (вам придется прокрутить далеко вниз, чтобы увидеть элементы SVG, мои извинения).

Другие возможные решения:
a) Использование Raphaël со встроенными функциями drag и onDragOver, хотя тогда я использую все SVG и пытаюсь использовать HTML-дом для движущихся частей, потому что они будут изображениями ( div с фоновым изображением). Кроме того, я, вероятно, должен был бы сам реализовать drop.
b) Попытка использовать перетаскивание HTML5, хотя я не уверен, что это также будет работать.

Answer 1

Это старый вопрос, но я все равно попробую ответить на него. Решение, которое я придумал, работало так:

1. Используйте JQueryUI для создания "перетаскиваемой" функциональности. Это имеет много удобных крючков.
2. Присоединение событий наведения и наведения мыши к элементам SVG.
3. Создание собственного менеджера перетаскивания.
4. Когда вы начинаете перетаскивание, зарегистрируйте элемент (или связанные данные) с менеджером перетаскивания.
5. Когда вы наводите курсор мыши на цель сброса, зарегистрируйте эту цель с помощью менеджер перетаскивания.
6. Проверьте ваши критерии «отбрасывания» в событии «stop» JQueryUI.draggable, и выполните обработку, требуемую там.

Вы можете увидеть пример этого в действии (используя D3 для генерации SVG) здесь: http://bl.ocks.org/thudfactor/6611441

Answer 2

вы можете использовать Rapheal.js Это можно сделать, применив простое перетаскивание jquery, сделайте наш HTML-элемент перетаскиваемым, а ваш документ Rapheal - Droppable. Вот код

HTML код:

<table style = "width:600px; border:1 px solid black;">
       <tr>
         <td>
           <div id="divDragable" class="ui-widget-content">
    <p>Drag me around</p>
           </div>
         </td>

         <td>
         <div id="divDroppable">
           </div>
         </td>

       </tr>
    </table>

Код запроса:

$(function () {

    //--- Draggable

    $("#divDragable").draggable();

    //-------------------- Code for Raphael---------------------
    var paper = Raphael("divDroppable", 200, 200);

    // Making SVG droppable
    $("#divDroppable").droppable({
        drop: function (event, ui) {
            // get targeted SVG elemnet by
            // event.originalEvent.target
        }

    });

    var recatngleObj1 = paper.rect(10, 15, 50, 30, 2);
    recatngleObj1.attr("id", "emptyRect");
    recatngleObj1.dropShadow(2, 3, 3, 1);
    recatngleObj1.attr("fill", "#B3E6FF");

});

Answer 3

Действительно, SVG трудно манипулировать. Вот пример, на котором вы могли бы основывать свои программы на ; просто посмотрите на источник.

В качестве альтернативы, если вы когда-нибудь решите отказаться от SVG, вот пара других идей.

1. Вы можете сделать фигуры абсолютно позиционированными <div> с разными z-индексами, а затем использовать jquery ui для их перемещения.
2. Вы можете использовать Canvas и HTML5 . Используя это, вам также не понадобится JQuery UI.