美文网首页
HTML5-draggable(拖放)

HTML5-draggable(拖放)

作者: china_木木 | 来源:发表于2018-07-20 18:01 被阅读0次
<!DOCTYPE html>
<html class="no-js">

    <head>
        <meta charset="utf-8">
        <title>HTML5-draggable(拖放)</title>
        <style type="text/css">
            #div1, #div2 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
        </style>
        
        <script type="text/javascript">
            /*
             * 虽然已经设定了img元素可被拖动,但是浏览器默认地,无法将数据/元素放置到其他元素中。
             * 如果有需要设置某些元素可接受被拖动元素,则要阻止它的默认行为,
             * 这要通过设置该接收元素的ondragover 事件,调用event.preventDefault() 方法
             */
            function allowDrop(ev) {
                ev.preventDefault(); //阻止默认行为
                
                //ev.target.id
                //此处ev.target是接收元素,通过事件被绑定在哪个元素即可区分
            }

            /*
             * 当该img元素被拖动时,会触发一个ondragstart 事件,该事件调用了一个方法drag(event)。
             */
            function drag(ev) {
                //ev.dataTransfer.setData() 方法设置被拖数据的数据类型(Text)和值(被拖元素id),
                //该方法将被拖动元素的id存储到事件的dataTransfer对象内,ev.dataTransfer.getData()可将该元素取出。
                //此处ev.target是被拖动元素
                ev.dataTransfer.setData("Text", ev.target.id); 
            }

            /*
             * 当被拖元素移动到接收元素,
             * 松开鼠标时(即被拖元素放置在接收元素内时)会出发ondrop事件
             */
            function drop(ev) {
                ev.preventDefault(); //阻止默认行为
                var data = ev.dataTransfer.getData("Text"); //将被拖动元素id取出
                ev.target.appendChild(document.getElementById(data)); //将被拖动元素添加到接收元素尾部
            }
        </script>
    </head>

    <body>

        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
            <!--为了使元素可拖动,把 draggable 属性设置为 true--> 
            <img src="http://www.w3school.com.cn/i/w3school_logo_black.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
        </div>
        
        <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

    </body>

</html>

相关文章

  • HTML5-draggable(拖放)

  • 前端面试05:说一下 HTML5 drag api

    dragstart:事件主体是被拖放元素,在开始拖放被拖放元素时触发。 darg:事件主体是被拖放元素,在正在拖放...

  • HTML5 之 Drag

    拖放事件 HTML4 通过mousedown mousemove mouseup 来实现拖放 HTML5 拖放事件...

  • 011 HTML5 拖放事件 01

    拖放事件 拖放操作是将一个元素拖放到另一个元素的操作,这项操作涉及到两个元素:被拖放元素和放置元素。在拖放过程中,...

  • HTML5拖放API附带示例

    拖放(Drag 和 drop)是HTML5标准的组成部分 拖放 拖放是一种常见的特性,即抓取对象以后拖放到其他位置...

  • HTML5 拖放笔记

    HTML5拖放(Drag 和 Drop) 拖放(Drag 和 drop)是 HTML5 标准的组成部分。 拖放 拖...

  • 拖放

    内容整理自网上! 一、拖放 实现效果: 代码: 二、拖放本地资源 代码:

  • HTML5中的图片拖放

    拖放函数: 1.HTML5拖放 Drag拖和drop放是HTML5标准的组成成分 2.拖放开始: ondragst...

  • Qml拖放

    需要在被拖放Item里设置拖放属性: 设置被拖放Item的鼠标区域: 接收端Item就比较好设置了, 增加Drop...

  • hmtl5 拖放研究

    参考文章:HTML Drag and Drop API 拖放事件 拖放事件有 dragstart, drag, d...

网友评论

      本文标题:HTML5-draggable(拖放)

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