Question

我正在尝试为网络设计创建一个应用。
目前看起来像这样：

我需要能够单击并将开关的图片拖动到画布上，以使其显示在画布上。我尝试使用JQuery UI，但由于图片可以在表格中找到，我只能在该空间内移动，而不是将其拖到画布上。

码

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

请帮忙吗？感谢。

无法从包含图像的表格拖放到画布

0 个答案: