H5学习之4 拖拽元素放置元素2

最新推荐文章于 2022-09-30 11:55:37 发布

GOGOGOAAAA

最新推荐文章于 2022-09-30 11:55:37 发布

阅读量426

点赞数 1

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

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

版权

h5 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>

    <style type="text/css">
        #div1, #div2 {
            float: left;
            width: 100px;
            height: 35px;
            margin: 100px;
            padding: 10px;
            border: 10px solid black;
        }
    </style>
  <!--  style标签里可以设置div的格式，也就是css文件
    float:left 是两个div向左浮动
    margin:100px 是元素的外边距，可以有4个值，一个值表示上下左右4个值一样。
    padding:10px 是元素的内边距 ，同上可以有4个值。
    border:10px 是外边界的大小 还有其他属性的设置
    -->

    <script type="text/javascript">
        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");/* 定义一个元素来接受刚才获取的拖拽元素的ID*/

            ev.target.appendChild(document.getElementById(data));  /*  将拖拽元素链接到此事件所处的元素上。*/


        }

    </script>

</head>
<body>

<div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)">
   <!-- 设置id,οndrοp="xx(event)"规定当放置完成时调用函数，οndragοver="xx(event)"规定了被放置元素是谁而且还有一个函数.-->

    <img src="w3school_logo_black.gif"  draggable="true" οndragstart="drag(event)" id="drag1"/>
    <!--设置ID，设置位置，设置是否可以被拖拽，还有拖拽发生时的执行函数-->
</div>

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

</div>

</body>
</html>

具体效果：

拖拽前

拖拽后

解释如下：

主体是两个div，1个图片。

<div id="div1" οndrοp="drop(event)" οndragοver="allowDrop(event)">
<!--    设置id,

	οndrοp="xx(event)"规定当放置完成时调用函数，

	οndragοver="xx(event)"规定了被放置元素是谁而且还有一个函数.-->


    <img src="w3school_logo_black.gif"  draggable="true" οndragstart="drag(event)" id="drag1"/>
    <!--设置ID，设置位置，设置是否可以被拖拽，οndragstart="drag(event)"拖拽发生时的执行函数-->
</div>

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

放在了body标签里，而且图片放在了第一个div里。

设置div的具体CSS格式

<style type="text/css">
    #div1, #div2 {
        float: left;
        width: 100px;
        height: 35px;
        margin: 100px;
        padding: 10px;
        border: 10px solid black;
    }
</style>

<!--  style标签里可以设置div的格式，也就是css文件
  float:left 是两个div向左浮动
  margin:100px 是元素的外边距，可以有4个值，一个值表示上下左右4个值一样。
  padding:10px 是元素的内边距 ，同上可以有4个值。
  border:10px 是外边界的大小 还有其他属性的设置
  -->

下边是函数，写在script里，script写在head里，也可以写在body里。

<script type="text/javascript">
        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");/* 定义一个元素来接受刚才获取的拖拽元素的ID*/

            ev.target.appendChild(document.getElementById(data));  /*  将拖拽元素链接到此事件所处的元素上。*/


        }

    </script>

GOGOGOAAAA

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
H5学习之4 拖拽元素放置元素2

html> type="text/css"> #div1, #div2 { float: left; width: 100px; height: 35px; margin: 100px; padding: 10px; bord
复制链接

扫一扫