Draggable svg elements

JavaScript
1

I have 2 svgs

image
image1920Ă—1080 85.2 KB

and am trying to drag one of the grey rectangles to the rack on the right
This seemed perfect

But im not 100% sure if im doing it right, heres all the elements I want to be able to drag

	<rect id="draggable" x="35" y="70" width="170" height="20" class="device jqeasytooltip" data-tiptheme="tipthemewhite" data-tipcontent="Dog Locator" />
	<rect id="draggable" x="35" y="150" width="170" height="20" class="device jqeasytooltip" data-tiptheme="tipthemewhite" data-tipcontent="Dog Locator" />
	<rect id="draggable" x="35" y="190" width="170" height="20" class="device jqeasytooltip" data-tiptheme="tipthemewhite" data-tipcontent="Dog Locator" />
	<rect id="draggable" x="35" y="250" width="170" height="20" class="device jqeasytooltip" data-tiptheme="tipthemewhite" data-tipcontent="Dog Locator" />
	<rect id="draggable" x="35" y="330" width="170" height="20" class="device jqeasytooltip" data-tiptheme="tipthemewhite" data-tipcontent="Dog Locator" />
	<rect id="draggable" x="35" y="370" width="170" height="20" class="device jqeasytooltip" data-tiptheme="tipthemewhite" data-tipcontent="Dog Locator" />
	<rect id="draggable" x="35" y="410" width="170" height="20" class="device jqeasytooltip" data-tiptheme="tipthemewhite" data-tipcontent="Dog Locator" />
	<rect id="draggable" x="35" y="450" width="170" height="20" class="device jqeasytooltip" data-tiptheme="tipthemewhite" data-tipcontent="Dog Locator" />

Then heres the code which I thought would activate it

	<script src="js/plain-draggable.min.js"></script>

	<script>
	 draggable = new PlainDraggable(document.getElementById('draggable'));
	</script>

Heres my full code

<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Move Device</title>
	<style>


	</style>
	</head>
	<body>
<div style="width:50%; float:right">
	<svg viewBox="0 0 1500 800">
	<defs>
	<style>
	text {
	font-size:.6em;
	font-face:verdana;
	}
	.device {
	fill:#e3e3e3;
	stroke:#000;
	stroke-width:.5;
	}
	.device:hover {
	fill: #007bff;
	}
	.tipthemewhite {margin:3em 0 0 1.1em;}
	</style>
	</defs>
	<line x1="35" y1="8" x2="215" y2="8" style="stroke:#212529" />
	<line x1="30" y1="15" x2="35" y2="8" style="stroke:#212529" />
	<line x1="210" y1="15" x2="215" y2="8" style="stroke:#212529" />
	<line x1="210" y1="475" x2="215" y2="465" style="stroke:#212529" />
	<line x1="215" y1="465" x2="215" y2="8" style="stroke:#212529" />
	<rect x="30" y="15" width="180" height="460" style="fill:white;stroke-width:2;stroke:#6c757d" />
	<rect x="35" y="20" width="170" height="450" style="fill:white;stroke-width:1;stroke:#6c757d;stroke-dasharray:5" />
	<text x="222" y="465">1</text>
	<text x="222" y="455">2</text>
	<text x="222" y="445">3</text>
	<text x="222" y="435">4</text>
	<text x="222" y="425">5</text>
	<text x="222" y="415">6</text>
	<text x="222" y="405">7</text>
	<text x="222" y="395">8</text>
	<text x="222" y="385">9</text>
	<text x="222" y="375">10</text>
	<text x="222" y="365">11</text>
	<text x="222" y="355">12</text>
	<text x="222" y="345">13</text>
	<text x="222" y="335">14</text>
	<text x="222" y="325">15</text>
	<text x="222" y="315">16</text>
	<text x="222" y="305">17</text>
	<text x="222" y="295">18</text>
	<text x="222" y="285">19</text>
	<text x="222" y="275">20</text>
	<text x="222" y="265">21</text>
	<text x="222" y="255">22</text>
	<text x="222" y="245">23</text>
	<text x="222" y="235">24</text>
	<text x="222" y="225">25</text>
	<text x="222" y="215">26</text>
	<text x="222" y="205">27</text>
	<text x="222" y="195">28</text>
	<text x="222" y="185">29</text>
	<text x="222" y="175">30</text>
	<text x="222" y="165">31</text>
	<text x="222" y="155">32</text>
	<text x="222" y="145">33</text>
	<text x="222" y="135">34</text>
	<text x="222" y="125">35</text>
	<text x="222" y="115">36</text>
	<text x="222" y="105">37</text>
	<text x="222" y="95">38</text>
	<text x="222" y="85">39</text>
	<text x="222" y="75">40</text>
	<text x="222" y="65">41</text>
	<text x="222" y="55">42</text>
	<text x="222" y="45">43</text>
	<text x="222" y="35">44</text>
	<text x="222" y="25">45</text>
	
	<rect id="draggable" x="35" y="70" width="170" height="20" class="device jqeasytooltip" data-tiptheme="tipthemewhite" data-tipcontent="Dog Locator" />
	<rect id="draggable" x="35" y="150" width="170" height="20" class="device jqeasytooltip" data-tiptheme="tipthemewhite" data-tipcontent="Dog Locator" />
	<rect id="draggable" x="35" y="190" width="170" height="20" class="device jqeasytooltip" data-tiptheme="tipthemewhite" data-tipcontent="Dog Locator" />
	<rect id="draggable" x="35" y="250" width="170" height="20" class="device jqeasytooltip" data-tiptheme="tipthemewhite" data-tipcontent="Dog Locator" />
	<rect id="draggable" x="35" y="330" width="170" height="20" class="device jqeasytooltip" data-tiptheme="tipthemewhite" data-tipcontent="Dog Locator" />
	<rect id="draggable" x="35" y="370" width="170" height="20" class="device jqeasytooltip" data-tiptheme="tipthemewhite" data-tipcontent="Dog Locator" />
	<rect id="draggable" x="35" y="410" width="170" height="20" class="device jqeasytooltip" data-tiptheme="tipthemewhite" data-tipcontent="Dog Locator" />
	<rect id="draggable" x="35" y="450" width="170" height="20" class="device jqeasytooltip" data-tiptheme="tipthemewhite" data-tipcontent="Dog Locator" />
	</svg>
	</div><div style="width:50%">
	<svg viewBox="0 0 1500 800">
	<defs>
	<style>
	text {
	font-size:.6em;
	font-face:verdana;
	}
	.device {
	fill:#e3e3e3;
	stroke:#000;
	stroke-width:.5;
	}
	.device:hover {
	fill: #007bff;
	}
	.tipthemewhite {margin:3em 0 0 1.1em;}
	</style>
	</defs>
	<line x1="35" y1="8" x2="215" y2="8" style="stroke:#212529" />
	<line x1="30" y1="15" x2="35" y2="8" style="stroke:#212529" />
	<line x1="210" y1="15" x2="215" y2="8" style="stroke:#212529" />
	<line x1="210" y1="475" x2="215" y2="465" style="stroke:#212529" />
	<line x1="215" y1="465" x2="215" y2="8" style="stroke:#212529" />
	<rect x="30" y="15" width="180" height="460" style="fill:white;stroke-width:2;stroke:#6c757d" />
	<rect x="35" y="20" width="170" height="450" style="fill:white;stroke-width:1;stroke:#6c757d;stroke-dasharray:5" />
	<text x="222" y="465">1</text>
	<text x="222" y="455">2</text>
	<text x="222" y="445">3</text>
	<text x="222" y="435">4</text>
	<text x="222" y="425">5</text>
	<text x="222" y="415">6</text>
	<text x="222" y="405">7</text>
	<text x="222" y="395">8</text>
	<text x="222" y="385">9</text>
	<text x="222" y="375">10</text>
	<text x="222" y="365">11</text>
	<text x="222" y="355">12</text>
	<text x="222" y="345">13</text>
	<text x="222" y="335">14</text>
	<text x="222" y="325">15</text>
	<text x="222" y="315">16</text>
	<text x="222" y="305">17</text>
	<text x="222" y="295">18</text>
	<text x="222" y="285">19</text>
	<text x="222" y="275">20</text>
	<text x="222" y="265">21</text>
	<text x="222" y="255">22</text>
	<text x="222" y="245">23</text>
	<text x="222" y="235">24</text>
	<text x="222" y="225">25</text>
	<text x="222" y="215">26</text>
	<text x="222" y="205">27</text>
	<text x="222" y="195">28</text>
	<text x="222" y="185">29</text>
	<text x="222" y="175">30</text>
	<text x="222" y="165">31</text>
	<text x="222" y="155">32</text>
	<text x="222" y="145">33</text>
	<text x="222" y="135">34</text>
	<text x="222" y="125">35</text>
	<text x="222" y="115">36</text>
	<text x="222" y="105">37</text>
	<text x="222" y="95">38</text>
	<text x="222" y="85">39</text>
	<text x="222" y="75">40</text>
	<text x="222" y="65">41</text>
	<text x="222" y="55">42</text>
	<text x="222" y="45">43</text>
	<text x="222" y="35">44</text>
	<text x="222" y="25">45</text>
	
	<rect x="35" y="70" width="170" height="20" class="device jqeasytooltip" data-tiptheme="tipthemewhite" data-tipcontent="Dog Locator" />
	<rect x="35" y="150" width="170" height="20" class="device jqeasytooltip" data-tiptheme="tipthemewhite" data-tipcontent="Dog Locator" />
	<rect x="35" y="190" width="170" height="20" class="device jqeasytooltip" data-tiptheme="tipthemewhite" data-tipcontent="Dog Locator" />
	<rect x="35" y="250" width="170" height="20" class="device jqeasytooltip" data-tiptheme="tipthemewhite" data-tipcontent="Dog Locator" />
	<rect x="35" y="330" width="170" height="20" class="device jqeasytooltip" data-tiptheme="tipthemewhite" data-tipcontent="Dog Locator" />
	<rect x="35" y="370" width="170" height="20" class="device jqeasytooltip" data-tiptheme="tipthemewhite" data-tipcontent="Dog Locator" />
	<rect x="35" y="410" width="170" height="20" class="device jqeasytooltip" data-tiptheme="tipthemewhite" data-tipcontent="Dog Locator" />
	<rect x="35" y="450" width="170" height="20" class="device jqeasytooltip" data-tiptheme="tipthemewhite" data-tipcontent="Shark Locator" />
	</svg>
	<script src="js/plain-draggable.min.js"></script>

	<script>
	 draggable = new PlainDraggable(document.getElementById('draggable'));
	</script>
	</div>
	</body>
	</html>
2

Shot for the moon, and you forgot the basics :wink:

You cannot have more than one element with the same ID - it’s an ID, it has to be unique. Use a class instead.

2 Likes
3

1 thought occured to me, is it possible to drag an element in 1 SVG into another SVG?

4

not…strictly speaking… there’s a couple of ways of going about simulating the effect though… using some javascript to detect collision with the edge, or simply by having two copies of the same element; one in each SVG, but with an offset the size of the other div…

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.