HTML5新特性的拖放（拖拽）讲解

html5新特性拖放（拖拽）定义抓取对象以后拖放到另一个位置。目前，它是HTML5标准的一部分。拖放的流程对应的事件选中 ---> 拖动 ---> 释放选中在HTML5标准中，为了使...

HTML5新特性拖放（拖拽）

定义

抓取对象以后拖放到另一个位置。目前，它是HTML5标准的一部分。

拖放的流程对应的事件

选中  --->  拖动  ---> 释放

选中

在HTML5标准中，为了使元素可拖动，把draggable属性设置为true。

文本、图片和链接是默认可以拖放的，它们的draggable属性自动被设置成了true。

图片和链接按住鼠标左键选中，就可以拖放。

文本只有在被选中的情况下才能拖放。如果显示设置文本的draggable属性为true，按住鼠标左键也可以直接拖放。

draggable属性：设置元素是否可拖动。

语法：

1.true: 可以拖动

2.false: 禁止拖动

3.auto: 跟随浏览器定义是否可以拖动

拖动

dragenter和dragover事件的默认行为是拒绝接受任何被拖放的元素。因此，我们必须阻止浏览器这种默认行为。e.preventDefault();

例子：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery-3.2.1.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .main{
            border: 1px solid red;
            width: 100%;
            height: 120px;
            padding: 10px 0 ;
        }
        .box{
            width: 100px;
            height: 100px;
            background:palegreen;
            float: left;
            text-align: center;
            line-height: 100px;
            margin-left: 5px;
        }
        .second{
            width: 100%;
            border: 1px solid #efefef;
            height: 130px;
        }
    </style>
</head>
<body>
<script>
    function allowDrop(ev)
    {
        ev.preventDefault();
    }
    function drag(ev)
    {
        ev.dataTransfer.setData("Text",ev.target.id);
    }
    function drop(ev)
    {
        ev.preventDefault();
        var data=ev.dataTransfer.getData("Text");
        console.log(ev.target.id)
//刚开始的时候我没有判断 就导致拖动的元素被作为子元素添加到了其他的盒子里面 所以就不显示 或者页面乱
        //在这里判断了一下元素托到的位置是在原来的盒子里面 还是另一个盒子里面
        if(ev.target.id=="foot" || ev.target.id=="top" ){
        //表示元素被拖到了另一个盒子中  不在原本的盒子中  appendChild
            ev.target.appendChild(document.getElementById(data));
        }else{
        //在原本的盒子中转换位置  aftert
            ev.target.after(document.getElementById(data));
        }
    }
</script>
        <!--进行放置                            放置何处-->
<ul class="main" id="top" ondrop="drop(event)" ondragover="allowDrop(event)">
<!--draggable 表示元素是否可以移动-->
    <li class="box" id="1"  draggable="true" ondragstart="drag(event)">1</li>
    <li class="box"  id="2" draggable="true" ondragstart="drag(event)">2</li>
    <li class="box"  id="3" draggable="true" ondragstart="drag(event)">3</li>
</ul>
<ul class="second" id="foot" ondrop="drop(event)" ondragover="allowDrop(event)">
</ul>
</body>
</html>

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

程序员编程交流QQ群：805358732

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。

发表于 2021-06-19 10:07
阅读 ( 737 )
分类：WEB前端开发

HTML5新特性的拖放（拖拽）讲解

HTML5新特性拖放（拖拽）

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »