zoukankan      html  css  js  c++  java
  • Html5-draggable元素拖动

    Html5元素拖动

    在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。
    Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动。
    注意:Safari 5.1.2不支持拖动.

    第一步:将需要拖动的元素Html标签设置为draggable="true"

    <img id="dragImg" draggable="true" src="img/test1.png" width="200" height="111" />

    第二步:定义拖动函数

            //拖动开始
            function dragStar(ev) {
                //获取拖动元素值得类型与id
                ev.dataTransfer.setData("Text", ev.target.id);
            }
    
            //拖动中
            function draging(ev) {
                //去除浏览器对数据的默认处理
                ev.preventDefault();
            }
    
            //拖动结束(放置)
            function dragEnd(ev) {
                //去除浏览器对数据的默认处理
                ev.preventDefault();
                //获取被拖动(需要放置)的元素的id
                var data = ev.dataTransfer.getData("Text");
                //将data放置到容器中
                ev.target.appendChild(document.getElementById(data));
            }

    第三步,为Html中需要拖动的元素,和拖动后放置的容器的 拖动事件绑定拖动上述定义函数

      <div id="div1" ondrop="dragEnd(event)" ondragover="draging(event)">
            <img id="dragImg" draggable="true" ondragstart="dragStar(event)" src="img/test1.png" width="200" height="111" />
        </div>
        <div id="div2" ondrop="dragEnd(event)" ondragover="draging(event)"></div>

    ok,功能实现;

    测试全代码:

    css

    #div1,#div2{ float:left; margin-right:10px; width:300px; height:120px; line-height:120px; text-align:center; border:1px solid #808080;  }
    img{ vertical-align:middle; }

    Html

    <div id="div1" ondrop="dragEnd(event)" ondragover="draging(event)">
            <img id="dragImg" draggable="true" ondragstart="dragStar(event)" src="img/test1.png" width="200" height="111" />
        </div>
        <div id="div2" ondrop="dragEnd(event)" ondragover="draging(event)"></div>

    JavaScript

           //拖动开始
            function dragStar(ev) {
                ev.dataTransfer.setData("Text", ev.target.id);
            }
    
            //拖动中
            function draging(ev) {
                ev.preventDefault();
            }
    
            //拖动结束(放置)
            function dragEnd(ev) {
                ev.preventDefault();
                var data = ev.dataTransfer.getData("Text");
                ev.target.appendChild(document.getElementById(data));
            }

    小知识:

    在拖动目标上触发事件 (源元素):

    ondragstart - 用户开始拖动元素时触发
    ondrag - 元素正在拖动时触发
    ondragend - 用户完成元素拖动后触发

    释放目标时触发的事件:

    ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
    ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
    ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
    ondrop - 在一个拖动过程中,释放鼠标键时触发此事件

  • 相关阅读:
    记一次CTF比赛过程与解题思路MISC部分
    使用requests爬虫遇到的一个奇葩的问题:UnicodeEncodeError: 'latin1' codec can't encode character
    纯前端实现词云展示+附微博热搜词云Demo代码
    亚马逊精细化选品服务
    乔布斯访谈笔记
    使用腾讯云轻量级服务器
    centos 设置阿里的yum源
    云未来、新可能 绿色、无处不在、可信的计算
    OpenKruise v1.0:云原生应用自动化达到新的高峰
    服务发现与配置管理高可用最佳实践
  • 原文地址:https://www.cnblogs.com/leona-d/p/6277773.html
Copyright © 2011-2022 走看看