HTML5学习-CSDN博客

本文链接：https://blog.csdn.net/zhizhenjin/article/details/109267647

本文详细介绍了如何在HTML5中使用draggable属性实现元素拖放交互，涵盖ondragstart, ondragover, ondrop事件的监听和数据传递。通过实例演示了如何创建一个div元素并允许其在两个div容器间拖动。

摘要由CSDN通过智能技术生成

HTML5学习

拖动特效

常使用的api

draggable='true':允许元素被拖动
ondragstart:监听元素发生拖动事件
ondragover:监听元素拖动进入事件
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>
        body{
            margin:0px;
        }
        .box{
            width:500px;
            height:500px;
            border:1px solid #ccc;
            margin:auto;
            display:flex;
            justify-content:space-evenly;
            align-items: center;
        }
        .box .div1{
            width:200px;
            height:200px;
            border:1px solid #f00;
            display:flex;
            justify-content: center;
            align-items: center;
        }
        .box .div2{
            width:200px;
            height:200px;
            border:1px solid #00f;
            display:flex;
            justify-content: center;
            align-items: center;
        }
        .drag{
            width:50px;
            height:50px;
            background:mediumaquamarine;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1">
            <div class="drag" draggable="true" id="drag"></div>
        </div>
        <div class="div2"></div>
    </div>
    <script>
        let drag=document.getElementById("drag");
        let div1=document.getElementsByClassName("div1")[0];
        let div2=document.getElementsByClassName("div2")[0];
        drag.ondragstart=function(e){
            //设置拖动元素的数据
            e.dataTransfer.setData("text",e.target.id);
        }
        div1.ondragover=function(e){
            //浏览器默认阻止元素拖动到其他元素，这里是阻止默认事件
            e.preventDefault();
        }
        div2.ondragover=function(e){
            e.preventDefault();
        }
        div2.ondrop=div1.ondrop=function(e){
            e.preventDefault();
            //获取拖动的元素
            let id=e.dataTransfer.getData("text");
            this.appendChild(document.getElementById(id));
        }
    </script>
</body>
</html>

css属性`object-fit`

object-fit适合于替换元素，比如video、object、img、input、svg

常使用的属性值

fill:让元素中的内容完全填满元素，不保持宽高比
contain:让元素中的内容保持宽高比填充元素
cover:让元素中的内容保持宽高比例填充满元素
none:让内容自适应元素的宽高

行内元素和块级元素

不会独占一行，不能设置宽高，元素内部的内容不能换行
独占一行，可以设置宽高，元素中的内容允许换行

替换元素和非替换元素

替换元素：浏览根据标签的元素属性来判断元素显示的内容，通常具有一定的宽高
- 元素没有内容，内容由元素属性决定
- input,img,textarea,select,video,audio
非替换元素：元素的内容会直接告诉浏览器，然后直接显示出来

web sql

//创建一个web 数据库
function createDataBase(){
    //参数1：数据库名称
    //参数2：数据库的版本
    //参数3：数据库的简介
    //参数4：数据库的大小，单位字节
    let db=openDatabase("blog","1.0","这是一个数据库",2*1024*1024);
    return db;
}

function dataHandle(db,sql,arr=[]){
    return new Promise((resolve,reject)=>{
        db.transaction((tx)=>{
            try {
                tx.executeSql(sql,arr,(tx,result)=>{
                    resolve(result);
                });
            } catch (error) {
                reject(error);
            }

        })
    })
}
let db=createDataBase();

function createTable(db){
    let sqlUser="create table user1(username not null unique,password varchar(10))";
    dataHandle(db,sqlUser);
}
// createTable(db)
//增加数据
// let sqladd="insert into user(username,password) values('zxxxx','1001')";
// dataHandle(db,sqladd).then(data=>{
//     console.log(data);
// }).catch(err=>{
//     console.log(err);
// })


//查询
// let sqlselect="select * from user";
// dataHandle(db,sqlselect).then(data=>{
//     console.log(data.rows[0]);
// })

//修改
// let sqlupdate="update user set username='21212121' where username='小红'";
// dataHandle(db,sqlupdate).then(data=>{
//     console.log(data)
// })

//删除
let sqldel="delete from user where username='小明' and password='1001'";
dataHandle(db,sqldel).then(data=>{
    console.log(data)
})