从html拖拽到svg区域的实现方案

最新推荐文章于 2024-05-14 10:06:15 发布

yanhappyYY

最新推荐文章于 2024-05-14 10:06:15 发布

阅读量877

点赞数

分类专栏： javascript 文章标签： html拖动 svg拖放从html拖放到svg

本文链接：https://blog.csdn.net/weixin_37064409/article/details/95982950

版权

javascript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

第二篇：解决鼠标穿透，优化鼠标中心点位置 解决鼠标穿透，优化鼠标中心点位置

代码地址：
github： https://yanhappiness.github.io/Notes/HtmlToSvg.html

效果展示

在这里插入图片描述

项目具体描述
可拖动区域为html元素，想要放置的区域是svg区域,正常来说由于svg元素不支持jq拖动事件所以需要自己兼容。本例完整的描述了兼容的思路和过程。

代码展示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HtmlToSvg - 从html拖放到svg区域 </title>
    <link href="https://cdn.bootcss.com/jqueryui/1.11.1/jquery-ui.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jqueryui/1.11.1/jquery-ui.min.js"></script>
    <script src="https://cdn.bootcss.com/d3/3.3.9/d3.min.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body,
        svg,
        .container {
            height: 100%;
            width: 100%;
        }

        .container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .dragWrap {
            height: 120px;
            width: 100%;
            border: 1px solid salmon;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .dropWrap {
            height: calc(100vh - 130px);
            width: 100%;
            border: 1px solid rebeccapurple;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="dragWrap">
            <img src="https://static.easyicon.net/preview/115/1154523.gif" class="dragImg" ms="0" alt="pic">
            <img src="https://static.easyicon.net/preview/115/1154523.gif" class="dragImg" ms="1" alt="pic">
        </div>
        <div class="dropWrap">
            <svg class="svgArea" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                preserveAspectRatio="xMinYMin meet">
                <g>
                    <rect class="dropRect" width="200" height="200" x="20" y="20" fill="#c0c0c0"></rect>
                    <rect class="dropRect" width="200" height="200" x="240" y="20" fill="#c0c0c0"></rect>
                    <rect class="dropRect" width="200" height="200" x="460" y="20" fill="#c0c0c0"></rect>
                    <rect class="dropRect" width="200" height="200" x="680" y="20" fill="#c0c0c0"></rect>
                </g>
                <g class="imageWrap">

                </g>
            </svg>
        </div>
    </div>

    <script>
        var dragObj = "";
        var dropObj = "";

        // jq-ui 允许从html拖出
        $(".dragImg").draggable({
            cancel: "a.ui-icon",
            containment: "document",
            helper: "clone",
            cursor: "move",
            zIndex: 9999,
            scroll: false,
            cursorAt: { left: -2 },
            // appendTo: ".laletteList",
            start: function (event, ui) {
                dragObj = $(ui.helper[0]);
            },
            stop: function (event, ui) {
                dragObj = "";
            }
        });

        // html放置区域情况下下面代码起作用，但是svg区域是失效的
        $(".svgArea").droppable({
            accept: ".dropRect",
            drop: function (event, ui) {
                console.log(event, ui);
            }
        });

        /**
         *  辅助鼠标移入、移出、弹起时间模拟jq-ui的droppable行为
         * 
         *  分为4个阶段：
         * 1. draggable 记录拖出元素对象
         * 2. mouseover 记录放置当前区域信息
         * 3. mouseout  清空放置区域记录
         * 4. mouseup   鼠标抬起时放置元素
         */

        $(".dropRect").on("mouseup", function () {
            if (dragObj !== "" && dropObj !== "") {
                var x = $(dropObj).attr("x");
                var y = $(dropObj).attr("y");
                var href = $(dragObj).attr("src");

                d3.select(".imageWrap")
                    .append("image")
                    .attr({
                        x: function () {
                            return x;
                        },
                        y: function () {
                            return y;
                        },
                        "xlink:href": function () {
                            return href;
                        },
                        preserveAspectRatio: "none",
                        width: 200,
                        height: 200,
                    });
                // console.log($(dragObj));
                // console.log($(dropObj));
            }
        });

        $(".dropRect").on("mouseover", function () {
            if (dragObj !== "") {
                dropObj = $(this);
            }
        });

        $(".dropRect").on("mouseout", function () {
            if (dragObj !== "") {
                dropObj = "";
            }
        });
    </script>
</body>

</html>

yanhappyYY

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
从html拖拽到svg区域的实现方案

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...
复制链接

扫一扫