SVG draggable using JQuery and Jquery-svg
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 jquery-ui svg
asked Jul 10 '09 at 8:54
skyfootskyfoot
11.6k64167
add a comment |
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 jquery-ui svg
asked Jul 10 '09 at 8:54
skyfootskyfoot
11.6k64167
add a comment |
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 jquery-ui svg
asked Jul 10 '09 at 8:54
skyfootskyfoot
11.6k64167
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 jquery-ui svg
jquery jquery-ui svg
asked Jul 10 '09 at 8:54
skyfootskyfoot
11.6k64167
asked Jul 10 '09 at 8:54
skyfootskyfoot
11.6k64167
asked Jul 10 '09 at 8:54
skyfootskyfoot
11.6k64167
asked Jul 10 '09 at 8:54
skyfootskyfoot
11.6k64167
asked Jul 10 '09 at 8:54
skyfootskyfoot
11.6k64167
11.6k64167
add a comment |
add a comment |
5 Answers
5
active
oldest
votes
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);
});
answered May 29 '11 at 9:12
tkdavetkdave
1,151127
Thanks, this works a treat.
– skyfoot
Aug 3 '11 at 10:05
add a comment |
The solution I'm tinkering with involves (to tie it to your case) creating a new div and svg, positioned over the original shape, to act as the handle for the targeted svg object. Make the handle div draggable and store the starting top/left offset externally (think hidden div). Once the "stop" event for the draggable div is fired, figure out the degree of change for the top and left (stopX-startX=changeX) and apply that to the original shapes coordinates. Then .remove() your temporary shape.
answered Sep 30 '10 at 5:34
MikeMike
212
add a comment |
This link has an excellent description of how to solve the problem in general (i.e., without requiring JQuery), and that is definitely the best solution I've seen. However, I wanted to keep using JQuery's excellent Draggable API.
I recently spent a couple days hammering at this problem. The accepted answer above is what I tried first, but I couldn't get it to work right in Firefox. There's something about how browsers handle SVG coordinates differently.
I came up with a solution that worked fairly well for me, in both Chrome and Firefox, and lets me keep using JQuery UI. I haven't tested it everywhere. It's definitely a hack.
You can see a quick mock-up of what I did in a fiddle here. The key idea is to use a proxy div which you keep hovering exactly over the svg element you want to drag. Then you change the svg element's x and y coordinates as you drag the proxy div. Something like this:
$('#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}
);
});
In my case the SVG element I wanted to drag would always fill a certain square on the screen, so it was very easy to position the proxy div over the target. In other situations it could be much more difficult. It's also not too hard to use the 'containment' option to make sure you don't drag the background outside the frame...it just takes some careful math and you have to reset the containment in between each drag.
To make this applicable to more SVG elements, you could use transforms rather than x and y coordinates.
edited May 23 '17 at 12:09
Community♦
11
answered Jun 21 '13 at 18:07
galdregaldre
1,8561229
add a comment |
I have created a basic drag drop function to target my svg objects. I dont have any containment or collistion detection. There is an issue if I move the mouse too quicly I will leave the draggable object behind.
<!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>
answered Jul 10 '09 at 12:02
skyfootskyfoot
11.6k64167
I had a response from Keith Wood who created jquerysvg keith-wood.name/svg.html "I'm working on getting jQuery to work with the SVG DOM, which is slightly different to the HTML DOM for which jQuery was designed. This will allow the attachment of jQuery event handlers to SVG elements. It won't implement drag-and-drop explicitly but it will aid in using jQuery to do so. I'll keep drag-and-drop functionality in mind for a future release."
– skyfoot
Jul 23 '09 at 16:15
Because of the number of views I thought I would update this. I created similar functionality in silverlight and the drag and drop was also ropey until I used silverlights Mouse Capture. I am not sure what happens in the Mouse Capture method but if it can be implemented in jquery then this would solve the drag and drop.
– skyfoot
Sep 2 '09 at 10:49
It works perfectly @skyfoot. But what about the line which has two pairs of coordinates, i.e. (x1,y1) and (x2,y2) rather that having one coordinate like circle (cx,cy)? Thank you.
– Bakhtiyor
Jun 8 '11 at 16:28
does this works on IE8.
– kamal
Aug 3 '11 at 6:51
@kamal this doesnt work in IE8. I dont believe svg works in IE8
– skyfoot
Aug 3 '11 at 10:05
|
show 2 more comments
Just put the svg in a draggable 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>answered Jan 19 at 6:09
Philippe PerretPhilippe Perret
256
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f1108480%2fsvg-draggable-using-jquery-and-jquery-svg%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
5 Answers
5
active
oldest
votes
5 Answers
5
active
oldest
votes
active
oldest
votes
active
oldest
votes
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);
});
answered May 29 '11 at 9:12
tkdavetkdave
1,151127
Thanks, this works a treat.
– skyfoot
Aug 3 '11 at 10:05
add a comment |
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);
});
answered May 29 '11 at 9:12
tkdavetkdave
1,151127
Thanks, this works a treat.
– skyfoot
Aug 3 '11 at 10:05
add a comment |
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);
});
answered May 29 '11 at 9:12
tkdavetkdave
1,151127
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);
});
answered May 29 '11 at 9:12
tkdavetkdave
1,151127
answered May 29 '11 at 9:12
tkdavetkdave
1,151127
answered May 29 '11 at 9:12
tkdavetkdave
1,151127
answered May 29 '11 at 9:12
tkdavetkdave
1,151127
1,151127
Thanks, this works a treat.
– skyfoot
Aug 3 '11 at 10:05
add a comment |
Thanks, this works a treat.
– skyfoot
Aug 3 '11 at 10:05
Thanks, this works a treat.
– skyfoot
Aug 3 '11 at 10:05
Thanks, this works a treat.
– skyfoot
Aug 3 '11 at 10:05
add a comment |
The solution I'm tinkering with involves (to tie it to your case) creating a new div and svg, positioned over the original shape, to act as the handle for the targeted svg object. Make the handle div draggable and store the starting top/left offset externally (think hidden div). Once the "stop" event for the draggable div is fired, figure out the degree of change for the top and left (stopX-startX=changeX) and apply that to the original shapes coordinates. Then .remove() your temporary shape.
answered Sep 30 '10 at 5:34
MikeMike
212
add a comment |
The solution I'm tinkering with involves (to tie it to your case) creating a new div and svg, positioned over the original shape, to act as the handle for the targeted svg object. Make the handle div draggable and store the starting top/left offset externally (think hidden div). Once the "stop" event for the draggable div is fired, figure out the degree of change for the top and left (stopX-startX=changeX) and apply that to the original shapes coordinates. Then .remove() your temporary shape.
answered Sep 30 '10 at 5:34
MikeMike
212
add a comment |
The solution I'm tinkering with involves (to tie it to your case) creating a new div and svg, positioned over the original shape, to act as the handle for the targeted svg object. Make the handle div draggable and store the starting top/left offset externally (think hidden div). Once the "stop" event for the draggable div is fired, figure out the degree of change for the top and left (stopX-startX=changeX) and apply that to the original shapes coordinates. Then .remove() your temporary shape.
answered Sep 30 '10 at 5:34
MikeMike
212
The solution I'm tinkering with involves (to tie it to your case) creating a new div and svg, positioned over the original shape, to act as the handle for the targeted svg object. Make the handle div draggable and store the starting top/left offset externally (think hidden div). Once the "stop" event for the draggable div is fired, figure out the degree of change for the top and left (stopX-startX=changeX) and apply that to the original shapes coordinates. Then .remove() your temporary shape.
answered Sep 30 '10 at 5:34
MikeMike
212
answered Sep 30 '10 at 5:34
MikeMike
212
answered Sep 30 '10 at 5:34
MikeMike
212
answered Sep 30 '10 at 5:34
MikeMike
212
212
add a comment |
add a comment |
This link has an excellent description of how to solve the problem in general (i.e., without requiring JQuery), and that is definitely the best solution I've seen. However, I wanted to keep using JQuery's excellent Draggable API.
I recently spent a couple days hammering at this problem. The accepted answer above is what I tried first, but I couldn't get it to work right in Firefox. There's something about how browsers handle SVG coordinates differently.
I came up with a solution that worked fairly well for me, in both Chrome and Firefox, and lets me keep using JQuery UI. I haven't tested it everywhere. It's definitely a hack.
You can see a quick mock-up of what I did in a fiddle here. The key idea is to use a proxy div which you keep hovering exactly over the svg element you want to drag. Then you change the svg element's x and y coordinates as you drag the proxy div. Something like this:
$('#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}
);
});
In my case the SVG element I wanted to drag would always fill a certain square on the screen, so it was very easy to position the proxy div over the target. In other situations it could be much more difficult. It's also not too hard to use the 'containment' option to make sure you don't drag the background outside the frame...it just takes some careful math and you have to reset the containment in between each drag.
To make this applicable to more SVG elements, you could use transforms rather than x and y coordinates.
edited May 23 '17 at 12:09
Community♦
11
answered Jun 21 '13 at 18:07
galdregaldre
1,8561229
add a comment |
This link has an excellent description of how to solve the problem in general (i.e., without requiring JQuery), and that is definitely the best solution I've seen. However, I wanted to keep using JQuery's excellent Draggable API.
I recently spent a couple days hammering at this problem. The accepted answer above is what I tried first, but I couldn't get it to work right in Firefox. There's something about how browsers handle SVG coordinates differently.
I came up with a solution that worked fairly well for me, in both Chrome and Firefox, and lets me keep using JQuery UI. I haven't tested it everywhere. It's definitely a hack.
You can see a quick mock-up of what I did in a fiddle here. The key idea is to use a proxy div which you keep hovering exactly over the svg element you want to drag. Then you change the svg element's x and y coordinates as you drag the proxy div. Something like this:
$('#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}
);
});
In my case the SVG element I wanted to drag would always fill a certain square on the screen, so it was very easy to position the proxy div over the target. In other situations it could be much more difficult. It's also not too hard to use the 'containment' option to make sure you don't drag the background outside the frame...it just takes some careful math and you have to reset the containment in between each drag.
To make this applicable to more SVG elements, you could use transforms rather than x and y coordinates.
edited May 23 '17 at 12:09
Community♦
11
answered Jun 21 '13 at 18:07
galdregaldre
1,8561229
add a comment |
This link has an excellent description of how to solve the problem in general (i.e., without requiring JQuery), and that is definitely the best solution I've seen. However, I wanted to keep using JQuery's excellent Draggable API.
I recently spent a couple days hammering at this problem. The accepted answer above is what I tried first, but I couldn't get it to work right in Firefox. There's something about how browsers handle SVG coordinates differently.
I came up with a solution that worked fairly well for me, in both Chrome and Firefox, and lets me keep using JQuery UI. I haven't tested it everywhere. It's definitely a hack.
You can see a quick mock-up of what I did in a fiddle here. The key idea is to use a proxy div which you keep hovering exactly over the svg element you want to drag. Then you change the svg element's x and y coordinates as you drag the proxy div. Something like this:
$('#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}
);
});
In my case the SVG element I wanted to drag would always fill a certain square on the screen, so it was very easy to position the proxy div over the target. In other situations it could be much more difficult. It's also not too hard to use the 'containment' option to make sure you don't drag the background outside the frame...it just takes some careful math and you have to reset the containment in between each drag.
To make this applicable to more SVG elements, you could use transforms rather than x and y coordinates.
edited May 23 '17 at 12:09
Community♦
11
answered Jun 21 '13 at 18:07
galdregaldre
1,8561229
This link has an excellent description of how to solve the problem in general (i.e., without requiring JQuery), and that is definitely the best solution I've seen. However, I wanted to keep using JQuery's excellent Draggable API.
I recently spent a couple days hammering at this problem. The accepted answer above is what I tried first, but I couldn't get it to work right in Firefox. There's something about how browsers handle SVG coordinates differently.
I came up with a solution that worked fairly well for me, in both Chrome and Firefox, and lets me keep using JQuery UI. I haven't tested it everywhere. It's definitely a hack.
You can see a quick mock-up of what I did in a fiddle here. The key idea is to use a proxy div which you keep hovering exactly over the svg element you want to drag. Then you change the svg element's x and y coordinates as you drag the proxy div. Something like this:
$('#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}
);
});
In my case the SVG element I wanted to drag would always fill a certain square on the screen, so it was very easy to position the proxy div over the target. In other situations it could be much more difficult. It's also not too hard to use the 'containment' option to make sure you don't drag the background outside the frame...it just takes some careful math and you have to reset the containment in between each drag.
To make this applicable to more SVG elements, you could use transforms rather than x and y coordinates.
edited May 23 '17 at 12:09
Community♦
11
answered Jun 21 '13 at 18:07
galdregaldre
1,8561229
edited May 23 '17 at 12:09
Community♦
11
edited May 23 '17 at 12:09
Community♦
11
edited May 23 '17 at 12:09
Community♦
11
11
answered Jun 21 '13 at 18:07
galdregaldre
1,8561229
answered Jun 21 '13 at 18:07
galdregaldre
1,8561229
answered Jun 21 '13 at 18:07
galdregaldre
1,8561229
1,8561229
add a comment |
add a comment |
I have created a basic drag drop function to target my svg objects. I dont have any containment or collistion detection. There is an issue if I move the mouse too quicly I will leave the draggable object behind.
<!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>
answered Jul 10 '09 at 12:02
skyfootskyfoot
11.6k64167
I had a response from Keith Wood who created jquerysvg keith-wood.name/svg.html "I'm working on getting jQuery to work with the SVG DOM, which is slightly different to the HTML DOM for which jQuery was designed. This will allow the attachment of jQuery event handlers to SVG elements. It won't implement drag-and-drop explicitly but it will aid in using jQuery to do so. I'll keep drag-and-drop functionality in mind for a future release."
– skyfoot
Jul 23 '09 at 16:15
Because of the number of views I thought I would update this. I created similar functionality in silverlight and the drag and drop was also ropey until I used silverlights Mouse Capture. I am not sure what happens in the Mouse Capture method but if it can be implemented in jquery then this would solve the drag and drop.
– skyfoot
Sep 2 '09 at 10:49
It works perfectly @skyfoot. But what about the line which has two pairs of coordinates, i.e. (x1,y1) and (x2,y2) rather that having one coordinate like circle (cx,cy)? Thank you.
– Bakhtiyor
Jun 8 '11 at 16:28
does this works on IE8.
– kamal
Aug 3 '11 at 6:51
@kamal this doesnt work in IE8. I dont believe svg works in IE8
– skyfoot
Aug 3 '11 at 10:05
|
show 2 more comments
I have created a basic drag drop function to target my svg objects. I dont have any containment or collistion detection. There is an issue if I move the mouse too quicly I will leave the draggable object behind.
<!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>
answered Jul 10 '09 at 12:02
skyfootskyfoot
11.6k64167
I had a response from Keith Wood who created jquerysvg keith-wood.name/svg.html "I'm working on getting jQuery to work with the SVG DOM, which is slightly different to the HTML DOM for which jQuery was designed. This will allow the attachment of jQuery event handlers to SVG elements. It won't implement drag-and-drop explicitly but it will aid in using jQuery to do so. I'll keep drag-and-drop functionality in mind for a future release."
– skyfoot
Jul 23 '09 at 16:15
Because of the number of views I thought I would update this. I created similar functionality in silverlight and the drag and drop was also ropey until I used silverlights Mouse Capture. I am not sure what happens in the Mouse Capture method but if it can be implemented in jquery then this would solve the drag and drop.
– skyfoot
Sep 2 '09 at 10:49
It works perfectly @skyfoot. But what about the line which has two pairs of coordinates, i.e. (x1,y1) and (x2,y2) rather that having one coordinate like circle (cx,cy)? Thank you.
– Bakhtiyor
Jun 8 '11 at 16:28
does this works on IE8.
– kamal
Aug 3 '11 at 6:51
@kamal this doesnt work in IE8. I dont believe svg works in IE8
– skyfoot
Aug 3 '11 at 10:05
|
show 2 more comments
I have created a basic drag drop function to target my svg objects. I dont have any containment or collistion detection. There is an issue if I move the mouse too quicly I will leave the draggable object behind.
<!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>
answered Jul 10 '09 at 12:02
skyfootskyfoot
11.6k64167
I have created a basic drag drop function to target my svg objects. I dont have any containment or collistion detection. There is an issue if I move the mouse too quicly I will leave the draggable object behind.
<!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>
answered Jul 10 '09 at 12:02
skyfootskyfoot
11.6k64167
answered Jul 10 '09 at 12:02
skyfootskyfoot
11.6k64167
answered Jul 10 '09 at 12:02
skyfootskyfoot
11.6k64167
answered Jul 10 '09 at 12:02
skyfootskyfoot
11.6k64167
11.6k64167
I had a response from Keith Wood who created jquerysvg keith-wood.name/svg.html "I'm working on getting jQuery to work with the SVG DOM, which is slightly different to the HTML DOM for which jQuery was designed. This will allow the attachment of jQuery event handlers to SVG elements. It won't implement drag-and-drop explicitly but it will aid in using jQuery to do so. I'll keep drag-and-drop functionality in mind for a future release."
– skyfoot
Jul 23 '09 at 16:15
Because of the number of views I thought I would update this. I created similar functionality in silverlight and the drag and drop was also ropey until I used silverlights Mouse Capture. I am not sure what happens in the Mouse Capture method but if it can be implemented in jquery then this would solve the drag and drop.
– skyfoot
Sep 2 '09 at 10:49
It works perfectly @skyfoot. But what about the line which has two pairs of coordinates, i.e. (x1,y1) and (x2,y2) rather that having one coordinate like circle (cx,cy)? Thank you.
– Bakhtiyor
Jun 8 '11 at 16:28
does this works on IE8.
– kamal
Aug 3 '11 at 6:51
@kamal this doesnt work in IE8. I dont believe svg works in IE8
– skyfoot
Aug 3 '11 at 10:05
|
show 2 more comments
I had a response from Keith Wood who created jquerysvg keith-wood.name/svg.html "I'm working on getting jQuery to work with the SVG DOM, which is slightly different to the HTML DOM for which jQuery was designed. This will allow the attachment of jQuery event handlers to SVG elements. It won't implement drag-and-drop explicitly but it will aid in using jQuery to do so. I'll keep drag-and-drop functionality in mind for a future release."
– skyfoot
Jul 23 '09 at 16:15
Because of the number of views I thought I would update this. I created similar functionality in silverlight and the drag and drop was also ropey until I used silverlights Mouse Capture. I am not sure what happens in the Mouse Capture method but if it can be implemented in jquery then this would solve the drag and drop.
– skyfoot
Sep 2 '09 at 10:49
It works perfectly @skyfoot. But what about the line which has two pairs of coordinates, i.e. (x1,y1) and (x2,y2) rather that having one coordinate like circle (cx,cy)? Thank you.
– Bakhtiyor
Jun 8 '11 at 16:28
does this works on IE8.
– kamal
Aug 3 '11 at 6:51
@kamal this doesnt work in IE8. I dont believe svg works in IE8
– skyfoot
Aug 3 '11 at 10:05
I had a response from Keith Wood who created jquerysvg keith-wood.name/svg.html "I'm working on getting jQuery to work with the SVG DOM, which is slightly different to the HTML DOM for which jQuery was designed. This will allow the attachment of jQuery event handlers to SVG elements. It won't implement drag-and-drop explicitly but it will aid in using jQuery to do so. I'll keep drag-and-drop functionality in mind for a future release."
– skyfoot
Jul 23 '09 at 16:15
I had a response from Keith Wood who created jquerysvg keith-wood.name/svg.html "I'm working on getting jQuery to work with the SVG DOM, which is slightly different to the HTML DOM for which jQuery was designed. This will allow the attachment of jQuery event handlers to SVG elements. It won't implement drag-and-drop explicitly but it will aid in using jQuery to do so. I'll keep drag-and-drop functionality in mind for a future release."
– skyfoot
Jul 23 '09 at 16:15
Because of the number of views I thought I would update this. I created similar functionality in silverlight and the drag and drop was also ropey until I used silverlights Mouse Capture. I am not sure what happens in the Mouse Capture method but if it can be implemented in jquery then this would solve the drag and drop.
– skyfoot
Sep 2 '09 at 10:49
Because of the number of views I thought I would update this. I created similar functionality in silverlight and the drag and drop was also ropey until I used silverlights Mouse Capture. I am not sure what happens in the Mouse Capture method but if it can be implemented in jquery then this would solve the drag and drop.
– skyfoot
Sep 2 '09 at 10:49
It works perfectly @skyfoot. But what about the line which has two pairs of coordinates, i.e. (x1,y1) and (x2,y2) rather that having one coordinate like circle (cx,cy)? Thank you.
– Bakhtiyor
Jun 8 '11 at 16:28
It works perfectly @skyfoot. But what about the line which has two pairs of coordinates, i.e. (x1,y1) and (x2,y2) rather that having one coordinate like circle (cx,cy)? Thank you.
– Bakhtiyor
Jun 8 '11 at 16:28
does this works on IE8.
– kamal
Aug 3 '11 at 6:51
does this works on IE8.
– kamal
Aug 3 '11 at 6:51
@kamal this doesnt work in IE8. I dont believe svg works in IE8
– skyfoot
Aug 3 '11 at 10:05
@kamal this doesnt work in IE8. I dont believe svg works in IE8
– skyfoot
Aug 3 '11 at 10:05
|
show 2 more comments
Just put the svg in a draggable 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>answered Jan 19 at 6:09
Philippe PerretPhilippe Perret
256
add a comment |
Just put the svg in a draggable 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>answered Jan 19 at 6:09
Philippe PerretPhilippe Perret
256
add a comment |
Just put the svg in a draggable 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>answered Jan 19 at 6:09
Philippe PerretPhilippe Perret
256
Just put the svg in a draggable 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>//*
$(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>//*
$(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>answered Jan 19 at 6:09
Philippe PerretPhilippe Perret
256
answered Jan 19 at 6:09
Philippe PerretPhilippe Perret
256
answered Jan 19 at 6:09
Philippe PerretPhilippe Perret
256
answered Jan 19 at 6:09
Philippe PerretPhilippe Perret
256
256
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f1108480%2fsvg-draggable-using-jquery-and-jquery-svg%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
