小编use*_*953的帖子

HTML5 Canvas拖放项目

一直在努力让这项工作奏效.这是我的代码:

<canvas id="graphCanvas" ondrop="drop(event)" ondragover="allowDrop(event)" height=600 width=1000 style="border:1px solid #000000;"></canvas>
                        <img id="img1" src="./images/arrow_up.svg" draggable="true" onmousedown="get_pos(event)" ondragstart="drag(event)"/>
                    <script type="text/javascript">
                        function init() {
                            var canvas = document.getElementById("graphCanvas");
                            var context = canvas.getContext("2d");

                            context.lineWidth = 2;
                            }
                            var pos;
                            function allowDrop(ev) {
                                ev.preventDefault();
                            }
                            function get_pos(ev){
                                pos = [ev.pageX, ev.pageY];
                            }
                            function drag(ev) {
                                ev.dataTransfer.setData("Text",ev.target.id);
                            }

                            function drop(ev) {
                                ev.preventDefault();
                                var offset = ev.dataTransfer.getData("text/plain").split(',');
                                var data=ev.dataTransfer.getData("Text");

                                var img = canvas = document.getElementById("img1");
                                var dx = pos[0] - img.offsetLeft;
                                var dy = pos[1] - img.offsetTop; …
Run Code Online (Sandbox Code Playgroud)

html html5 canvas

0
推荐指数
1
解决办法
7433
查看次数

标签 统计

canvas ×1

html ×1

html5 ×1