H5学习之3 拖拽元素放置元素

最新推荐文章于 2022-08-31 20:28:22 发布

GOGOGOAAAA

最新推荐文章于 2022-08-31 20:28:22 发布

阅读量629

点赞数

分类专栏： h5 文章标签： html5

本文链接：https://blog.csdn.net/qq_29469941/article/details/52002815

版权

h5 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style type="text/css">
        #div1 {
            width: 488px;
            height: 100px;
            padding: 10px;
            border: 5px black solid;
        }
    </style>
    <!--定义样式/CSS
       padding 是内边距，增大可以增加整个方形div的大小
       border 是边框的属性 10px是边框线的粗细， yellow设置颜色， solid设置为显示
       -->

    <script type="text/javascript">
        function allowDrop(ev) {
            ev.preventDefault(); //默认是不能将一个元素拖拽放到另外一个元素上，需要阻止这种默认形式。
        }

        function drag(ev){
            ev.dataTransfer.setData("Text",ev.target.id); //拖拽发生时，会给被拖拽的元素 一个类型，一个值。
            // Text是类型，ev.target.id是值。ev是本事件，ev.target是事件所在的元素，ev.target.id是元素的ID
        }

        function drop(ev){
            ev.preventDefault(); //W3S的解释是默认是以链接形式打拖拽后的效果，阻止默认，就会在原界面中产生效果。 但是注释掉这行，仍然不会产生新的链接。这就很尴尬了。
            var data=ev.dataTransfer.getData("Text");
            //通过 dataTransfer.getData("Text") 方法获得被拖的数据，该方法将返回在 setData() 方法中设置为相同类型的任何数据。就是说会获得TEXT类型那个数据的ID
            ev.target.appendChild(document.getElementById(data));
            //appendChild（ID） 将ID为data这个数的元素 放置到ev.target上，也就是div1上。
        }
    </script>

</head>
<body>
<p>把图片拖放至下面的框内</p>

<div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)" ></div>
<!--οndragοver="xx(event)" 规定在何处放置被拖拽的元素 ，参数是event说明传入的是事件本身-->
<!--οndrοp="xxx(event)" 是当放置被拖拽的元素时执行函数-->

</br>

<img id="drag1"
     draggable="true"
     οndragstart="drag(event)"
     src="w3school_banner.gif"/>
<!--draggable="true" 将其设置成可拖拽-->
<!--οndragstart="xxx(event)" 规定了被拖拽的元素 以及被拖拽时发生的函数-->
<!--img标签不需要结束标签，一个就够了-->

</body>
</html>

解释如下：

body标签里有两个标签

一个div 一个img

<div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)" ></div>

<!--οndragοver="xx(event)" 规定在何处放置被拖拽的元素 ，参数是event说明传入的是事件本身-->
<!--οndrοp="xxx(event)" 是当放置被拖拽的元素时执行函数-->

id="div1" 是设置这个div的id,

这个div的格式由在head里的style标签来设置。

<style type="text/css">
    #div1 {
        width: 488px;
        height: 100px;
        padding: 10px;
        border: 5px black solid;
    }
</style>

<!--定义样式/CSS
   padding 是内边距，增大可以增加整个方形div的大小
   border 是边框的属性 10px是边框线的粗细， yellow设置颜色， solid设置为显示
   -->

</br>

换行标签

<img id="drag1"
     draggable="true"
     οndragstart="drag(event)"
     src="w3school_banner.gif"/>

<!--draggable="true" 将其设置成可拖拽-->
<!--οndragstart="xxx(event)" 规定了被拖拽的元素 以及被拖拽时发生的函数-->
<!--img标签不需要结束标签，一个就够了-->

src是规定图片位置。

函数写在script标签里，script标签写在了head里，也可以写在body里。

<script type="text/javascript">
    function allowDrop(ev) {
        ev.preventDefault(); //默认是不能将一个元素拖拽放到另外一个元素上，需要阻止这种默认形式。
    }

    function drag(ev){
        ev.dataTransfer.setData("Text",ev.target.id); //拖拽发生时，会给被拖拽的元素 一个类型，一个值。
        // Text是类型，ev.target.id是值。ev是本事件，ev.target是事件所在的元素，ev.target.id是元素的ID
    }

    function drop(ev){
        ev.preventDefault(); //W3S的解释是默认是以链接形式打拖拽后的效果，阻止默认，就会在原界面中产生效果。 但是注释掉这行，仍然不会产生新的链接。这就很尴尬了。
        var data=ev.dataTransfer.getData("Text");
        //通过 dataTransfer.getData("Text") 方法获得被拖的数据，该方法将返回在 setData() 方法中设置为相同类型的任何数据。就是说会获得TEXT类型那个数据的ID
        ev.target.appendChild(document.getElementById(data));
        //appendChild（ID） 将ID为data这个数的元素 放置到ev.target上，也就是div1上。
    }
</script>