网页内部元素拖拽实现

最新推荐文章于 2024-04-09 17:34:36 发布

长风携水

最新推荐文章于 2024-04-09 17:34:36 发布

阅读量712

点赞数

本文链接：https://blog.csdn.net/talen123/article/details/52166297

版权

web前端同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

JavaScript

2 篇文章 0 订阅

订阅专栏

html5

1 篇文章 0 订阅

订阅专栏

为了完成老师的要求，今天去了解的一下网页内部的拖拽，即把网页一个元素拖到网页中另一个地方。

如图

我要把左边的三张图拖动到右边的盒子里。

废话不多说，代码奉上：

<!DOCTYPE html>
<html>

<head>
    <title>拖拽</title>
</head>

<style type="text/css">

    * {
        margin: 0px;
        padding: 0px;

    }

    .box {

        width: 400px;
        height: 300px;
        float: left;
        border: solid 5px #000;

    }

    .box img {

        width: 100px;
        height: 100px;

    }


</style>

<body>


<div class="box" id="div1" οndrοp="drop(event)" οndragοver="allowDrap(event)">
    <!--设置第一个盒子的事件，ondrop函数就相当于说明这个盒子可以用来拖拽，ondragover函数说明这个盒子可以拿存放拖拽过来的元素-->

    <img id="img1" draggable="true" οndragstart="start(event)" src="img/2.jpg"/><!--把要拖拽的元素的draggable设为true，ondragstart方法表示鼠标拖动时执行的方法-->
    <img id="img2" draggable="true" οndragstart="start(event)" src="img/3.jpg"/>
    <img id="img3" draggable="true" οndragstart="start(event)" src="img/4.jpg"/>

</div>


<div class="box" id="div2" οndrοp="drop(event)" οndragοver="allowDrap(event)">
    <!--设置第二个盒子的事件，ondrop方法就相当于说明这个盒子可以用来拖拽，ondragover方法说明这个盒子可以拿存放拖拽过来的元素-->

</div>

<script type="text/javascript">

    var img_id;//定义鼠标拖拽图片的id

    function allowDrap(e) {

        e.preventDefault();
        /*preventDefault方法通知 Web 浏览器不要执行与事件关联的默认动作,因为浏览器默认拖拽的元素为链接,所以这个函数是为了避免浏览器执行链接动作*/

    }


    function start(e) {

        img_id = e.target.id;
        /*e.target获得触发事件的元素,e.target.id获取当前函数的id*/

    }

    function drop(e) {

        e.preventDefault();
        /*preventDefault方法通知 Web 浏览器不要执行与事件关联的默认动作,因为浏览器默认拖拽的元素为链接,所以这个函数是为了避免浏览器执行链接动作*/

        e.target.appendChild(document.getElementById(img_id));
        /*e.target.appendChild为获取元素的内部添加拖拽图片的节点代码*/


    }


</script>
</body>
</html>