Unable to drag from table containing images and drop to canvas

Question

I am trying to create an app for network design.
It looks like this at the moment:

I need to be able to click and drag a picture of a switch to the canvas so as to make it appear on it. I tried using the JQuery UI but as the pictures are found in a table, I can move it only within that space, and not drag it to the canvas.

Codes

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Drawing Application</title>
<link href="shape.css" rel="stylesheet">
<script src="shape.js"></script>
<script type="text/javascript" src="src/rulers.js"></script>

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
</style>

<script>

    $(function() {
        $( "#draggable" ).draggable();
    });

</script>

</head>

<body>

<div>
    <canvas class='ruler' id='ruler' width="500" height="600"></canvas>
</div>

<div id="menu1" class="toolbox1"  class="menu_hidden1" style="margin-top:70px;">
    <span style="color:white; margin-bottom:-20px; z-index:3; font-family:montserrat; font-size:11px; margin-top: 5px; position:absolute; margin-left:10px;">Switches</span>
    <div id="menu_button1" onclick="menu_toggle1(this.parentNode)" style="margin-left:6px; width:70%; height:8%; margin-top:20px; border-radius:7px;"><img style="margin-left:6px; margin-top:12px;" src="image/switches/1.png" title="Switches" width="80%"/></div>
    <div id="menu_content1" style="margin-top:-52px; height:20%; width:19% ">
        <div id="line1">
            <center>
                <table cellspacing="0">
                    <tr>
                        <td>
                            <img id="draggable" class="ui-widget-content" class="img1" src="image/switches/1.png" title="Line" style="margin-left:2px; margin-top:10px; cursor:pointer;"/>
                        </td>
                        <td>
                            <img class="img1" src="image/switches/2.png" title="Straight Arrow" style="margin-left:7px; margin-right:2px; margin-top:10px; cursor:pointer;"/>
                        </td>
                        <td>
                            <img class="img1" src="image/switches/3.png" title="ZigZag Line" style="margin-left:7px; margin-right:0px; margin-top:10px; cursor:pointer;"/>
                        </td>
                        <td>
                            <img class="img1" src="image/switches/6.png" title="ZigZag Line" style="margin-left:7px; margin-right:2px; margin-top:10px; cursor:pointer;"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <img class="img1" src="image/switches/4.png" title="Line" style="margin-left:2px; margin-top:10px; cursor:pointer;"/>
                        </td>
                        <td>
                            <img class="img1" src="image/switches/5.png" title="Straight Arrow" style="margin-left:7px; margin-right:2px; margin-top:10px; cursor:pointer;"/>
                        </td>
                        <td>
                            <img class="img1" src="image/switches/7.png" title="ZigZag Line" style="margin-left:7px; margin-right:0px; margin-top:10px; cursor:pointer;"/>
                        </td>
                        <td>
                            <img class="img1" src="image/switches/8.png" title="ZigZag Line" style="margin-left:7px; margin-right:2px; margin-top:10px; cursor:pointer;"/>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <img class="img1" src="image/switches/9.png" title="Line" style="margin-left:2px; margin-top:10px; cursor:pointer;"/>
                        </td>
                        <td>
                            <img class="img1" src="image/switches/10.png" title="Straight Arrow" style="margin-left:7px; margin-right:2px; margin-top:10px; cursor:pointer;"/>
                        </td>
                        <td>
                            <img class="img1" src="image/switches/11.png" title="ZigZag Line" style="margin-left:7px; margin-right:0px; margin-top:10px; cursor:pointer;"/>
                        </td>
                        <td>
                            <img class="img1" src="image/switches/12.png" title="ZigZag Line" style="margin-left:7px; margin-right:2px; margin-top:10px; cursor:pointer;"/>
                        </td>
                    </tr>
                </table>
            </center>
        </div>
    </div>
</div>

</body>
</html>

Any help please? Thanks.

Here it is: http://liveweave.com/XcoovF The pictures are not showing up but you can see the first switch moves only in that table. — Manisha Singh Sanoo, Dec 04 '15 at 08:40
Here's how to use jQueryUI to drag an img element over the canvas and then draw that image object onto the canvas: http://stackoverflow.com/questions/21656003/html5-drag-and-drop-images-from-a-toolbar-to-a-canvas/21656756#21656756 — markE, Dec 04 '15 at 14:18

Unable to drag from table containing images and drop to canvas

0 Answers0