——————————————————————————

<script type="text/javascript">            
            //当图片放下以后的事件回调
            function allowDrop(ev){
                ev.preventDefault();    //屏蔽掉事件默认的行为
            }
            //图片被拖动时的事件回调
            function drag(ev){
                //把图片的id通过事件传递
                ev.dataTransfer.setData("IMG_ID",ev.target.id);
            }
            //当图片放下时的事件回调
            function drop(ev){
                ev.preventDefault();    //屏蔽掉事件默认的行为
                //获取被拖动的图片的id值
                var data = ev.dataTransfer.getData("IMG_ID");
                //得到图片的DOM对象
                var pic = document.getElementById(data);
                //在目标DIV里挂接图片DOM
                ev.target.appendChild(pic);
            }
</script>

——————————————————————————————

<style>
            div{width: 300px; height: 80px; border: 1px solid black; margin: 0 auto; padding: 5px;}
 </style>

——————————————————————————————

<body style="text-align:center">
        <p>把图片拖动到矩形框里:</p>
        <!-- 目标容器的ondrop和ondragover事件的设置 -->
        <div id="myDiv" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        <br />
        <!-- 图片的属性和事件设置 -->
        <img id="myDrag" src="drag_img.jpg" draggable="true" ondragstart="drag(event)" />
</body>

————————————————————————————————

H5的新应用-拖到页面上的元素的更多相关文章

  1. 章节十四、9-Actions类鼠标悬停、滚动条、拖拽页面上的元素

    一.鼠标悬停 1.在web网站中,有一些页面元素只需要我们将鼠标指针放在上面就会出现被隐藏的下拉框或者其它元素,在自动化的过程中我们使用Actions类对鼠标进行悬停操作. 2.案例演示 packag ...

  2. python3 操作页面上各种元素的方法

    (1)       控制浏览器 ①控制浏览器窗口大小set_window_size(宽,高) 打开浏览器全屏maximize_window() ②控制浏览器后退back().前进forward() ③ ...

  3. 点击页面上的元素，页面删除removeChild()

    简单描述:最近做了一个图片上传,上传完成回显图片的时候,需要用到点击图片,从页面删除的效果,然后就找到了removeChild()方法,说实话,我刚看到的时候,就觉得这个问题已经解决了,但是却发现这个 ...

  4. js 取父级 页面上的元素

    var bb=window.opener.frames["contentIframe"].document.all["my:费用类别"][0].value; / ...

  5. js检测页面上一个元素是否已经滚动到了屏幕的可视区域内

    应用场景:只要页面加载了,其中在页面中出现的li就向控制台输出第几个发送请求:在本次加载的页面中,再将滚动条滚回前边的li,不再向控制台输出东西,也就是说已经显示过的li,不再向控制台输出东西. &l ...

  6. dom：文档对象模型，提供的api去操作页面上的元素

    dom对象通过html标签转义成了文档操作对象

  7. Javascript/jQuery根据页面上表格创建新汇总表格

    任务背景及需求 按页面上的现成表格,用js生成新的统计表格如下: 实现思路 1,把表格数据抽取出来生成json数组 2,计算表格总数并创建空表格 3,历遍json数组把数据动态插入所有的表格,设值/a ...

  8. ios系统微信浏览器、safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法

    一. 运行环境: iphone所有机型的qq浏览器,safari浏览器,微信内置浏览器(qq浏览器内核)等. 二. 异常现象: 1. 大幅度上下滑动h5页面,然后停止滑动,有时候会影响到页面滚动,如局 ...

  9. 使用 pjax 载入的新页面，新页面上 类方法 无法被触发？

    在父页面上有定义类似 $(".class").click(function(){ ... }) 经过pjax 载入后的新页面 点击后没有触发事件 在segmentfault 上提问 ...

随机推荐

  1. C# 委托的三种调用示例（同步调用 异步调用 异步回调）

    首先,通过代码定义一个委托和下面三个示例将要调用的方法: 复制代码 代码如下: public delegate int AddHandler(int a,int b);    public class ...

  2. in_array 判断的一些见解

    我个人见解in_array的判断是== 并不是===  证明如下: $arr=(array_merge(range(1, 9),range('a', 'z'),range('A', 'Z')));$m ...

  3. STL容器小结

     1.空间分配器 std::alloc用于容器中内存空间的分配和释放,以及分配内存的管理.construct().destroy()等全局函数用于为对象的构造和析构. 2.迭代器和trains 迭代器 ...

  4. scala正则表达式

       正则表达式     Scala 通过 scala.util.matching 包种的 Regex 类来支持正则表达式 scala.util.matching.Regex.构造一个Regex对象, ...

  5. 《Windows编程循序渐进》——MFC封装机制详解

    单文档

  6. 《JS权威指南学习总结--7.8 数组方法》

    内容要点: 一.join() Array.join()方法将数组中所有元素都转化为字符串并连接在一起,返回最后生产的字符串. 可以指定一个可选的字符串在生产的字符串中来分隔数组的各个元素.如果不指定分 ...

  7. Flask-Request对象属性

    Request属性 元属性 method host path environ headers data body中的内容 最安全 解析后 remote_addr args form values  a ...

  8. POJ 1740 A New Stone Game（多堆博弈找规律）

    传送门 //有n堆,AB轮流从n堆的一堆中移任意个,可以扔掉,也可以移给其他堆中的一堆 //最先移完的胜 //如果n堆中两两堆数目相等,那肯定是B胜 //但只要有非两两相同的,如xyz,A先, //A ...

  9. deepin2014.1快捷键

    初试deepin2014.1,发现windows很多快捷键在deepin中也完美支持,举例如下: ctrl+shift+n : 新建文件夹 窗口键+E:打开文件系统 窗口键+TAB:3D切换桌面 al ...

  10. [SOJ] connect components in undirected graph

    题目描述: 输入一个简单无向图,求出图中连通块的数目 输入: 输入的第一行包含两个整数n和m,n是图的顶点数,m是边数.1<=n<=1000,0<=m<=10000. 以下m行 ...