Bootstrap 拖曳 

我的Bootstrap笔记

　　拖曳

　　拖曳操作需要借助鼠标来实现，如文件或图片的移动操作等。在开发中，经常使用原生的javascript来实现拖曳效果，实现起来就比较复杂了。因此HTML5提供了更好的接口或者事件在很大程度上降低了页面拖曳交互的实现难度。

在HTML 5中任何元素都能够实现拖曳操作，可以通过为元素添加属性draggable='true' 来实现，需要注意的是，图片和链接默认是可以拖曳的，它不用添加draggable属性，一个完整的拖曳效果是由拖曳（Drag）和释放（Drop）组成的。

在拖曳操作中，被拖曳的元素称做源对象，是指页面中设置了draggable="true"属性的元素；源对象进入的元素称作目标元素，目标元素可以是页面的任一元素。

 

 

　源对象的事件监听：
事件 事件描述
ondrag 作用于整个拖曳过程
ondragstart 当拖曳开始时触发
ondragend

当拖曳结束时触发

 

 

 

 

 

 

 

目标元素的事件监听：
事件 事件描述
ondragenter 当源对象进入目标元素时触发
ondragover 当源对象悬停在目标元素上方时触发
ondragleave 当源对象离开目标元素时触发
ondrop 当源对象在目标元素上方时释放鼠标时触发

 

 

 

 

 

 

　　代码如下：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖曳</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            float: left;
            margin:10px;
        }
        div:nth-child(2){
            border: 1px solid green;
        }
        div:nth-child(3){
            border: 1px solid blue;
        }
        p {
            height: 25px;
            background-color: pink;
            line-height: 25px;
            text-align:center
        }
    </style>
</head>
<body>
    <div id="div1">
        <p id="p1" draggable="true">拖曳内容1</p>
        <p id="p2" draggable="true">拖曳内容2</p>
        <p id="p3" draggable="true">拖曳内容3</p>
        <p id="p4" draggable="true">拖曳内容4</p>
    </div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
<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>
</html>

 

　　

 

运行结果图：

 

 

 

posted @ 2021-09-24 10:56  baicil  阅读(957)  评论(0)    收藏  举报