javascript - javascript:拖动路径元素使其不可用
问题描述
我的测试代码中有两个元素。一个闭合路径元素和一个矩形元素。我正在使用 svg.draggable.js 库来拖动这两个元素。rect 元素似乎可以很好地拖动,但是当我单击它并尝试拖动它时,路径元素会消失。有人可以解释发生了什么以及如何使路径元素可拖动吗?
< body >
<
div id = "curve" >
<
/div> <
div id = "drawing" > < /div> <
script id = "jscript" >
var r = SVG('drawing').size(500, 500);
var p = r.path().attr({
id: 'path0',
padding: '0px',
fill: 'blue',
d: 'M0 0 C100 120 150 120 150 100z',
stroke: {
color: 'black',
width: 1,
padding: '1px'
}
}).draggable();
var b = r.rect().attr({
id: 'rect0',
x: 300,
y: 300,
height: 30,
width: 30,
fill: 'red'
}).draggable(); <
/script> < /
body >
<!DOCTYPE html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.js"></script>
<script src="file:///C:/Users/angular2/Downloads/svg.draggable.js/dist/svg.draggable.js">
<!-- It does not appear there is any cdns location for svg.draggable.js library online. You will need to download it and install it locally if you would like to test the code -->
</script>
</head>
解决方案
我能够通过创建一个嵌套组,将路径元素放在嵌套组中,然后使嵌套组可拖动而不是单个元素来解决问题。
推荐阅读
- flutter - Flutter 中的跨平台文件缓存
- javascript - Vuejs计算属性for循环打印所有值,但只返回一个值
- mysql - 如何在日志文件中恢复mysql产生的错误?
- angular - 如何阻止 Visual Studio Code 在使用代码段生成的新行中添加两个空格?
- python - 非常基本的网络抓取查询,适合您的好人
- .net - 使用 Asp.Net core 3.0 打开串口时出现 UnauthorizedAccessException
- python - /usr/bin/ld: 找不到 -lpython3.6m
- php - 需要将数据从表传输到另一个模板
- flutter - 格式化飞镖文件时如何更改vscode中的飞镖行长度?
- gitlab - Gitlab安装在centos 7上没有响应