今天接到一个小小的需求,就是利用 JS 来实现鼠标拖动一个div,来实现其位置的改变。虽然说要求看着很简单,但实现起来还是比较难一点的,下面就说说实现的方法!

js实现鼠标拖动div改变其位置的方法

先上个图示,大家看一下效果!

102.gif

js实现鼠标拖动的div的代码

html完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            color:aliceblue;
            margin-right: 10px; 
        }
    </style>
</head>
<body>
    <div draggable="true" style="background-color: #E91E63;">div1</div>
    <div draggable="true"  style="background-color: green;">div2</div>
    <div draggable="true"  style="background-color: #ccc;">div3</div>
<script>
    div = document.getElementsByClassName('ws');
    container = null;
    for(let i=0;i<div.length;i++){
        div[i].ondragstart = function(){
            container = this;
        }
        div[i].ondragover = function(){
            event.preventDefault();
        }
        div[i].ondrop = function(){
            if(container != null && container != this){
                temp = document.createElement('div');
                document.body.replaceChild(temp,this);
                document.body.replaceChild(this, container);
                document.body.replaceChild(container, temp);
            }
        }
    }
</script>
</body>
</html>

注意要点:

1、被移动元素的 draggable 属性一直要设置为 true

2、移动到的位置,一定要有一个指定的范围,不然会报错

3、上面的示例采用的是元素替换的方法

DIV draggable 属性小解

draggable:属性规定元素是否可拖动。

语法:

<p draggable="true">这是一个可拖动的段落。</p>

注:拖动div元素的效果,需要配合js来实现!