html5拖拽运用纪录及留意点

日期:2021-02-22 类型:科技新闻 

关键词:秀米制作h5,h5如何制作,h5小游戏制作,h5游戏开发,免费的h5制作网站

下面根据编码给大伙儿详细介绍html5拖拽运用纪录,实际编码以下所示:

e.dataTransfer.setData("a","设定的值");
e.dataTransfer.getData("a");
function drop(e)
{
    <!--尝试console.log(e),这里能拿到许多你用获得的api-->
    e.dataTransfer.setData("a", e.target.id);
}

拖拽元素

被拖拽的元素上要添加入draggable="true"特性

1些留意点:

drop 务必配上 dragover,不然恶性事件不起效

document.getElementById('right').ondragover = function (ev) {
    ev.preventDefault(); //阻拦向上冒泡
}
document.getElementById('right').ondrop = function (ev) {
    ev.preventDefault(); //阻拦向上冒泡
    console.log("放入");
}

react中应用恶性事件务必是驼峰,比如:onDragOver

vue中在ui库组件上加的情况下记得加 .native,比如:@drop.native

详细检测实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .div1{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            position: relative;
            margin-left:20px;
            float: left;
        }
        .div2{
            width: 200px;
            height: 200px;
            border: 1px solid blue;
            position: relative;
            margin-left:20px;
            float: left;
        }
        .div3{
            width: 200px;
            height: 200px;
            border: 1px solid green;
            position: relative;
            margin-left:20px;
            float: left;
        }
        p{
            background-color: orange;
            margin-top: 5px;
        }
    </style>
</head>
<body>
<div class="div1" id="div1">
    <!--在h5中,假如想拖拽元素,就务必为元素加上draggable="true". 照片和超连接默认设置便可以拖拽-->
    <p id="pe" draggable="true">试着把我拖以往</p>
    <p id="pe1" draggable="true">试着也把我拖以往</p>
</div>
<div class="div2" id="div2"></div>
<div class="div3" id="div3"></div>
<script>
    /*学习培训拖拽,关键便是学习培训拖拽恶性事件*/
    var p=document.querySelector("#pe1");
    var div2=document.querySelector("#div2");
    var div3=document.querySelector("#div3");
    /*运用于被拖拽元素的恶性事件
    *ondrag         运用于拖拽元素,全部拖拽全过程都会启用--不断
     ondragstart    运用于拖拽元素,当拖拽刚开始时启用
     ondragleave    运用于拖拽元素,当电脑鼠标离去拖拽元素时启用
     ondragend    运用于拖拽元素,当拖拽完毕时启用*/
    p.ondragstart=function(e){
        console.log("刚开始");
        e.dataTransfer.setDate("a")
    }
    p.ondragend=function(){
        console.log("完毕");
    }
    p.ondragleave=function(){
        console.log("离去总体目标");
    }
    p.ondrag=function(){
        // console.log("不断开启--⑴11111");
    }
 
    /*运用于总体目标元素的恶性事件
    *ondragenter    运用于总体目标元素,当拖拽元素进到时启用
     ondragover    运用于总体目标元素,当滞留在总体目标元素上时启用
     ondrop        运用于总体目标元素,当在总体目标元素上松开电脑鼠标时启用
     ondragleave    运用于总体目标元素,当电脑鼠标离去总体目标元素时启用*/
    div2.ondragenter=function(){
        console.log("进到总体目标1");
    }
    div2.ondragover=function(e){
        console.log(e);
        console.log("在总体目标1中回旋");
        //console.log("ondragover");
        /*假如想开启ondrop恶性事件,那末就务必在这个部位阻拦访问器的默认设置个人行为*/
        e.preventDefault();
    }
    /*访问器默认设置会阻拦ondrop恶性事件:大家务必在ondragover中阻拦访问器的默认设置个人行为*/
    div2.ondrop=function(){
        console.log("锁住总体目标1,降落");
        /*加上被拖拽的元素到当今总体目标元素*/
        div2.appendChild(p);
    }
    div2.ondragleave=function(){
        console.log("离去总体目标1");
    }

    div3.ondragenter=function(){
        console.log("进到总体目标2");
    }
 
    div3.ondragover=function(e){
        console.log("在总体目标2中回旋");
        //console.log("ondragover");
        /*假如想开启ondrop恶性事件,那末就务必在这个部位阻拦访问器的默认设置个人行为*/
        e.preventDefault();
    }
    div3.ondrop=function(){
        console.log("锁住总体目标2,降落");
        /*加上被拖拽的元素到当今总体目标元素*/
        div3.appendChild(p);
    }
    div3.ondragleave=function(){
        console.log("离去总体目标2");
    }
</script>
</body>
</html>

总结

到此这篇有关html5拖拽运用纪录的文章内容就详细介绍到这了,更多有关html5拖拽运用內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!