html5新特性拖放（拖拽）

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

拖放的流程对应的事件

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

选中
在HTML5标准中，为了使元素可拖动，把draggable属性设置为true。
文本、图片和链接是默认可以拖放的，它们的draggable属性自动被设置成了true。
图片和链接按住鼠标左键选中，就可以拖放。
文本只有在被选中的情况下才能拖放。如果显示设置文本的draggable属性为true，按住鼠标左键也可以直接拖放。

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

1.true: 可以拖动
2.false: 禁止拖动
3.auto: 跟随浏览器定义是否可以拖动

拖动

针对对象	事件	说明
拖动的元素	dragstart	在元素开始被拖动时候触发
	drag	在元素被拖动时反复触发
	dragend	在拖动操作完成时触发
目的地对象	dragenter	当被拖动元素进入目的地元素所占据的屏幕空间时触发
	dragover	当被拖动元素在目的地元素内时触发
	dragleave	当被拖动元素没有放下就离开目的地元素时触发
	drop	当被拖动元素在目的地元素里放下时触发，一般需要取消浏览器的默认行为。

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>

来源：CSDN

作者：暖心小豪

链接：https://blog.csdn.net/z1902737007/article/details/103757367

标签

html5

draggable