Bootstrap 拖曳_心得技巧

心得技巧

html5 HTML/Xhtml CSS XML/XSLT Dreamweaver教程 Frontpage教程心得技巧

上一篇: 集合遍历（子集遍历）--二进制下一篇:查找oa记录的日志,申请书没有生成...

Bootstrap 拖曳

发布时间：2022-07-05 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了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>