SVG 可拖动使用 JQuery 和 Jquery-svg [英] SVG draggable using JQuery and Jquery-svg

查看：16 发布时间：2021/12/17 18:02:27 jquery jquery-ui svg

本文介绍了SVG 可拖动使用 JQuery 和 Jquery-svg的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个 HTML 5 页面，我在其中加载了一个 svg 圆圈.当我点击圆圈时，我会在点击的地方创建另一个小圆圈.我希望能够拖动第二个圆圈，但似乎无法使用 jquery-ui .draggable();

我可以通过访问其 cx 和 cy 属性来移动圆，因此必须有一种方法可以拖动它.

 <html><头><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(文档).ready(函数(){$('#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);});})函数 drawInitial(svg) {svg.add($('#svginline'));}函数 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();}<身体><div id="目标" ></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="结果" >ffff</div>

解决方案

jQuery UI 可拖动行为确实有效，但您需要在拖动处理程序中手动更新位置，因为相对 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){//把目标放在前面$(event.target.parentElement).append(event.target);}).bind('drag', function(event, ui){//手动更新坐标，因为顶部/左侧样式道具不适用于 SVGevent.target.setAttribute('x', ui.position.left);event.target.setAttribute('y', ui.position.top);});

I have an HTML 5 page where I load an svg circle. When I click on the circle I create another small circle where I click. I want to be able to drag the second circle but cant seem to do it with jquery-ui .draggable();

I am able to move the circle by accessing its cx and cy attributes so there must be a way to drag it.

    <!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>

解决方案

jQuery UI draggable behavior does work, but you need to update the position manually in the drag handler, as relative CSS positioning doesn't work inside 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);
  });

这篇关于SVG 可拖动使用 JQuery 和 Jquery-svg的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

SVG 可拖动使用 JQuery 和 Jquery-svg [英] SVG draggable using JQuery and Jquery-svg

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

SVG 可拖动使用 JQuery 和 Jquery-svg [英] SVG draggable using JQuery and Jquery-svg

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭