美文网首页
H5的原生拖拽,拖放事件(drag and drop)

H5的原生拖拽,拖放事件(drag and drop)

作者: Sccong | 来源:发表于2016-12-06 20:19 被阅读0次

    通过  draggable=true  设置是否可以被拖动(ie这个老表不支持)

    • dragstart:拖拽开始时在被拖拽元素上触发此事件,监听器需要设置拖拽所需数据,从操作系统拖拽文件到浏览器时不触发此事件.
    • ragenter:拖拽鼠标进入元素时在该元素上触发,用于给拖放元素设置视觉反馈,如高亮
    • dragover:拖拽时鼠标在目标元素上移动时触发.监听器通过阻止浏览器默认行为设置元素为可拖放元素.
      -dragleave:拖拽时鼠标移出目标元素时在目标元素上触发.此时监听器可以取消掉前面设置的视觉效果.
    • drag:拖拽期间在被拖拽元素上连续触发
    • drop:鼠标在拖放目标上释放时,在拖放目标上触发.此时监听器需要收集数据并且执行所需操作.如果是从操作系统拖放文件到浏览器,需要取消浏览器默认行为.
    • dragend:鼠标在拖放目标上释放时,在拖拽元素上触发.将元素从浏览器拖放到操作系统时不会触发此事件.
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html" charset="utf-8">
            <title>Scc</title>
            <style>
                div{
                    width:600px;
                    height:600px;
                    border:1px solid black;
                    padding-top:20px;
                    padding-left:20px;
                }
                #d1{
                    float:left;
                }
                #d2{
                    float:right;
                }
            </style>
        </head>
        <body>
            <div id="d1">
                <img id="img" src="Koala.jpg">
            </div>
            <div id="d2"></div>
        </body>
        <script>
            var d2=document.getElementById("d2");
            var img=document.getElementById("img");
            img.ondragstart=function(event){
                var data=this.src;
                event.dataTransfer.setData("text",data);
            }
            d2.ondragover=function(event){
                event.preventDefault();
            }
            d2.ondrop=function(event){
                var src=event.dataTransfer.getData("text");
                var i=document.createElement("img");
                i.src=src;
                d2.appendChild(i);
                document.getElementById("d1").removeChild(img);
            }
        </script>
    </html>
    

    注意:dataTransfer是全局共享的,可以通过getData()和setData()设置、获取数据

    相关文章

      网友评论

          本文标题:H5的原生拖拽,拖放事件(drag and drop)

          本文链接:https://www.haomeiwen.com/subject/ikwrmttx.html