SVG перетаскивается с помощью JQuery и JQuery-svg

У меня есть страница HTML 5, где я загружаю круг SVG. Когда я нажимаю на круг, я создаю еще один маленький круг, на который я нажимаю. Я хочу, чтобы иметь возможность перетаскивать второй круг, но не могу сделать это с помощью jquery-ui.draggable();

Я могу перемещать круг, обращаясь к его атрибутам cx и cy, поэтому должен быть способ перетащить его.

    <!DOCTYPE HTML> 
<html >
<head>
<title></title>
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/layout.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/jquery.js" type="text/javascript" ></script>
<script src="js/jquerysvg/jquery.svg.js" type="text/javascript" ></script>
<script src="js/jquery-ui.js" type="text/javascript" ></script>
<script type="text/javascript" >
jQuery(document).ready(function(){
    $('#target').svg({onLoad: drawInitial});
    $('circle').click(function(e){
        drawShape(e);
        var shape = this.id;

    });

    $('.drag').mousedown(function(e){
        var shape = this.id;
        this.setAttribute("cx", e.pageX);
        this.setAttribute("cy", e.pageY);
    });
})

function drawInitial(svg) {
    svg.add($('#svginline')); 
}

function drawShape(e) {
    var svg = $("#target").svg('get');
    $('#result').text(e.clientX + ": " +  e.pageX);
    var dragme = svg.circle(e.clientX, e.clientY, 5, {fill: 'green', stroke: 'red', 'stroke-width': 3, class_: 'drag'});    
    //$(dragme).draggable();
}
</script>
</head>
<body>
    <div id="target" ></div>
    <svg:svg id="svginline">
        <svg:circle id="circ11" class="area" cx="75" cy="75" r="50" stroke="black" stroke-width="2" fill="red"/>
    </svg:svg>
    <div id="result" >ffff</div>
</body>
</html>

Ответы

Ответ 1

поведение jQuery UI draggable действительно работает, но вам нужно обновить позицию вручную в обработчике перетаскивания, поскольку относительное позиционирование CSS не работает внутри SVG.

svg.rect(20,10,100,50, 10, 10, {fill:'#666'});
svg.rect(40,20,100,50, 10, 10, {fill:'#999'});
svg.rect(60,30,100,50, 10, 10, {fill:'#ccc'});

$('rect')
  .draggable()
  .bind('mousedown', function(event, ui){
    // bring target to front
    $(event.target.parentElement).append( event.target );
  })
  .bind('drag', function(event, ui){
    // update coordinates manually, since top/left style props don't work on SVG
    event.target.setAttribute('x', ui.position.left);
    event.target.setAttribute('y', ui.position.top);
  });

Ответ 2

Решение, с которым я возится, включает (привязать его к вашему делу), создавая новый div и svg, расположенный над исходной формой, чтобы действовать как дескриптор целевого объекта svg. Сделайте перетаскивание элемента div и сохраните смещение стартового/левого смещения снаружи (подумайте о скрытом div). Как только событие "остановить" для перетаскиваемого div будет запущено, выясните степень изменения для верхнего и левого (stopX-startX = changeX) и примените это к исходным координатам фигур. Затем .remove() ваша временная форма.

Ответ 3

Эта ссылка имеет отличное описание того, как решить проблему в целом (то есть, не требуя JQuery), и это определенно лучшее решение, которое я видел. Тем не менее, я хотел продолжать использовать JQuery отличный Draggable API.

Недавно я потратил пару дней на эту проблему. Принятый выше ответ - это то, что я пробовал в первую очередь, но я не мог заставить его работать прямо в Firefox. Там что-то о том, как браузеры обрабатывают SVG-координаты по-разному.

Я придумал решение, которое хорошо работало для меня, как в Chrome, так и в Firefox, и позволяет мне использовать JQuery UI. Я не тестировал его повсюду. Это определенно взлом.

Вы можете увидеть быстрый макет того, что я сделал в скрипке здесь. Основная идея заключается в использовании прокси-div, который вы держите точно над элементом svg, который хотите перетащить. Затем вы меняете координаты x и y svg при перетаскивании прокси-div. Что-то вроде этого:

$('#proxy').on('drag', function(e)
    {
        t = $('#background');
        prox = $('#proxy');
        t.attr('x', t.attr('x')*1
                   + prox.css('left').slice(0,-2)*1
                   - prox.data('position').left)
            .attr('y', t.attr('y')*1
                      + prox.css('top').slice(0,-2)*1
                      - prox.data('position').top);
        prox.data('position',{top : prox.css('top').slice(0,-2)*1,
                              left: prox.css('left').slice(0,-2)*1}
                  );
    });

В моем случае элемент SVG, который я хотел перетащить, всегда заполнял бы определенный квадрат на экране, поэтому было бы очень легко позиционировать прокси-сервер над мишенью. В других ситуациях это может быть намного сложнее. Также не слишком сложно использовать параметр "сдерживания", чтобы убедиться, что вы не перетаскиваете фон за рамку... он просто берет некоторую тщательную математику, и вы должны reset содержать между каждым перетаскиванием.

Чтобы сделать это применимым к большему количеству элементов SVG, вы можете использовать преобразования, а не координаты x и y.

Ответ 4

Я создал базовую функцию перетаскивания, чтобы нацелить мои объекты svg. У меня нет обнаружения сдерживания или столкновения. Есть проблема, если я слишком быстро передвигаю мышь. Я оставлю объект с перетаскиванием.

<!DOCTYPE HTML> 
<html >
<head>
<title></title>
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/layout.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/jquery.js" type="text/javascript" ></script>
<script src="js/jquery-ui.js" type="text/javascript" ></script>
<script src="js/jquerysvg/jquery.svg.js" type="text/javascript" ></script>
<script src="js/jquerysvg/jquery.svgdom.js" type="text/javascript" ></script>

<script type="text/javascript" >
jQuery(document).ready(function(){
    $('#target').svg({onLoad: drawInitial});
    $('circle').click(function(e){
        drawShape(e);
        var shape = this.id;

    }); 
})

function drawInitial(svg) {
    svg.add($('#svginline')); 
}

function onMouseDown(evt){
        //var shape = this.id;

        var target = evt.target;        
        target.onmousemove = onMouseMove; 

        return false; 
}

function onMouseMove(evt){
    circle = evt.target

    var cx = circle.getAttribute("cx");
    offsetX = $('#target').offset().left;
    offsetY = $('#target').offset().top
    circle.setAttribute("cx", evt.clientX -offsetX);
    circle.setAttribute("cy", evt.clientY - offsetY);

    circle.onmouseup = OnMouseUp;
}

function OnMouseUp(evt) { 
    var target = evt.target;        
    target.onmousemove = null; 
}

function drawShape(e) {
    var svg = $("#target").svg('get');
    offsetX = $('#target').offset().left;
    offsetY = $('#target').offset().top;
    $('#result').text(e.clientX + ": " +  e.pageX);
    var dragme = svg.circle(e.clientX - offsetX, e.clientY - offsetY, 5, {onmousedown: "onMouseDown(evt)",fill: 'green', stroke: 'red', 'stroke-width': 3});    
    $(dragme).addClass('drag');
}
</script>
</head>
<body>
    <div id="target" ></div>
    <svg:svg id="svginline">
        <svg:circle id="circ11" class="area" cx="75" cy="75" r="50" stroke="black" stroke-width="2" fill="red"/>
    </svg:svg>
    <div id="result" >ffff</div>
</body>
</html>

Ответ 5

Просто поместите svg в перетаскиваемый div.

//*
$(document).ready(function(){
  $('#mydiv').draggable();
});
//*/

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="mydiv">
  <svg xml:lang="en"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <text class="main" x="10" transform="rotate(-28 0 0)" y="90">Sol min</text>
    <text class="sous" x="4" y="110" transform="rotate(-28 0 20)">(SOUS DOM.)</text>
   <line stroke="black" stroke-width="2" x1="10" y1="100" x2="110" y2="46" />
   <line stroke="red" stroke-width=2 x1=10 y1=99 x2=10 y2=140 />
 </svg>
</div>