美文网首页
html中的拖拽功能

html中的拖拽功能

作者: Mracale | 来源:发表于2020-09-18 16:15 被阅读0次
<!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>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .div1,
        .div2,
        .div3 {
            margin: 0 20px;
            float: left;
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }
        div{
            display: flex;
            flex-direction: column;
            align-items: center
        }
        p{
            display: flex;
            flex-direction: column;
            align-items: center
        }

        .p1 {
            width: 50px;
            background-color: pink;
            margin: 5px 0;
        }

        .p2 {
            width: 80px;
            background-color: burlywood;
            margin: 5px 0;
        }
        .p3 {
            width: 110px;
            background-color: rgb(133, 88, 29);
            margin: 5px 0;
        }
        .p4 {
            width: 140px;
            background-color: rgb(172, 37, 48);
            margin: 5px 0;
        }
        .p5 {
            width: 170px;
            background-color: rgb(17, 182, 31);
            margin: 5px 0;
        }
        .p6 {
            width: 200px;
            background-color: rgb(90, 33, 155);
            margin: 5px 0;
        }
    </style>
</head>

<body>
    <div id="div1" class="div1">
        <!-- 在h5中,如果想拖拽元素,就必须为元素添加draggable="true"。图片和超链接默认就可以拖拽 -->
        <p id="pe3" class="p3" draggable="true">3</p>
        <p id="pe2" class="p2" draggable="true">2</p>
        <p id="pe5" class="p5" draggable="true">5</p>
        <p id="pe1" class="p1" draggable="true">1</p>
        <p id="pe6" class="p6" draggable="true">6</p>
        <p id="pe4" class="p4" draggable="true">4</p>
    </div>
    <div id="div2" class="div2"></div>

    <div id="div3" class="div3"></div>

    <script>
        /* 拖拽元素支持的事件
            ondrag 应用于拖拽元素,整个拖拽过程都会调用
            ondragstart 应用于拖拽元素,当拖拽开始时调用
            ondragleave 应用于拖拽元素,当鼠标离开拖拽元素是调用
            ondragend 应用于拖拽元素,当拖拽结束时调用

            目标元素支持的事件
            ondragenter 应用于目标元素,当拖拽元素进入时调用
            ondragover 应用于目标元素,当停留在目标元素上时调用
            ondrop 应用于目标元素,当在目标元素上松开鼠标时调用
            ondragleave 应用于目标元素,当鼠标离开目标元素时调用
        */

        // var obj = null; /* 当前被拖拽的值*/

        document.ondragstart = function (e) {
            /*通过dataTransfer来实现数据的存储与获取
                setData(format, data)
                format: 数据的类型: text/html  text/uri-list
                Data: 数据: 一般来说是字符串值
            */
            // e.dataTransfer.setData("Text", e.target.id);
            e.target.style.opacity = 0.5
            e.dataTransfer.setData("text", e.target.id);
            console.log(e.target.id)
        }

        document.ondragend = function (e) {
            e.target.style.opacity = 1;
        }

        /*浏览器默认会阻止ondrop事件:我们必须在ondrapover中阻止默认行为*/
        document.ondragover = function (e) {
            e.preventDefault();
        }

        document.ondrop = function (e) {
            console.log(e);
            /*通过e.dataTransfer.setData存储的数据,只能在drop事件中获取*/
            var data = e.dataTransfer.getData("text");
            e.target.appendChild(document.getElementById(data));
        }
    </script>
</body>
</html>

相关文章

  • html中的拖拽功能

  • HTML5 拖拽事件

    HTML5 拖拽事件图片自带拖拽功能其他元素也通过设置 draggable=true属性 实现拖拽功能 垃圾(拖拽...

  • POS-2017

    拖拽排序功能 实现方法: 使用jquery的Sortable功能可以实现拖拽功能 index页面 html部分 商...

  • HTML5拖拽事件

    HTML5拖拽事件 1. 设置拖拽 图片自带拖拽功能其他元素可设置draggable属性 例子: 1.1. 拖拽元...

  • React 实现组件拖拽功能

    ##实现React组件的拖拽功能 HTML5原生支持拖拽功能,没有看过相关文档,恰好自己想实现一下React组件...

  • HTML 5 拖拽

    @(HTML5)[HTML 5拖拽] [TOC] 十三、HTML 5 拖拽 HTML 5 拖拽事件 图片自带拖拽功...

  • 如何完成一个js原生窗口拖拽?

    窗口拖拽这一功能在web app中经常要用到,所以我们需要写一个原生的拖拽功能。 1.html代码 在id为myD...

  • 利用HTML5与ajax完成拖拽上传文件

    前言 基于ajax的异步模式的上传控件,基本功能如下: 拖拽上传(利用HTML5新增特定 拖拽事件 以及 even...

  • DOM拖拽排序(JavaScript)

    实现拖拽排序功能,废话少说,上代码 html部分 js部分 效果如下

  • 拖拽API

    实现拖拽效果 目前实现拖拽效果 HTML5拖拽 源元素事件例子 目标元素事件 从本地拖放图片到页面中 实现拖拽

网友评论

      本文标题:html中的拖拽功能

      本文链接:https://www.haomeiwen.com/subject/umujyktx.html