Javascript实现拖拽案例

Javascript实现拖拽案例

源码实现如下：

demo.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer"/>
    <title>原生Js拖曳案例</title>

    <link type="text/css" rel="styleSheet"  href="css/style.css" />
</head>
<body>
<h1>Javascript实现的拖拽案例</h1>
<hr>
<div id="container">
    <div id="target">
        <a id='a1' style="display: block;" href="https://www.baidu.com">百度网可拖拽的超链接</a>
        <img id='m3' style="cursor: pointer" title="京东网-可拖拽的图片" src="images/jd_logo.jpg"
             class="img-responsive" alt="京东网-可拖拽的图片">
        <p id="p1" draggable="true">拖曳内容1</p>
        <div id="p2" draggable="true">拖曳内容2</div>
    </div>

    <div id="end">

    </div>
</div>

<script>
    //当拖曳开始触发时
    document.ondragstart = function (event) {
        console.log('源对象开始被拖动');
        console.log(event.target.id);
        event.dataTransfer.setData('text/html', event.target.id);//传递id值
    };
    // //作用于整个拖曳过程（不断地执行）
    // document.ondrag = function(event){
    //     console.log('源对象被拖动过程中');
    // };
    // //当拖拽结束时触发
    // document.ondragend = function(event){
    //     console.log('源对象被拖动结束');
    // };
    // //当源对象进入目标元素时
    // document.ondragenter = function(event){
    //     console.log('目标对象被源对象拖动的进入');
    //     console.log('event.target');
    // };
    //当源对象悬停在目标元素上方时触发
    document.ondragover = function (event) {
        console.log('源对象悬停在目标元素上方时');
        return false;
    };
    // //当源对象离开目标元素时
    // document.ondragleave = function(){
    //     console.log('离开了');
    // };
    //当源对象在目标元素上方释放鼠标时
    document.ondrop = function (event) {
        console.log('上方释放')
        var id = event.dataTransfer.getData('text/html');
        event.target.appendChild(document.getElementById(id));
    };
</script>

</body>
</html>

style.css

@charset "utf-8";

#container{
    width: 1200px;
    height: 480px;
    outline: 2px solid #ccc;
    border: none;
    display: flex;
    justify-content: center;
    align-items:center;
    margin: 20px auto;
}

div {
    width: 300px;
    height: 400px;
    border: 1px solid red;
    margin: 20px;
    padding: 2px;
}

h1{
    text-align: center;
}

p {
    height: 25px;
    background-color: pink;
    line-height: 25px;
    text-align: center
}

image {
    width: 300px;
    height: 300px;
}

#p2 {
    height: 40px;
    width: 80%;
    text-align: center;
    line-height: 40px;
    border: 2px dashed cornflowerblue;
}

运行效果：