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

<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. JavaFX基础学习之OkHttp/Gson

    导入jar包,使用OkHttp/Okio/Gson请求解析 package application; import java.io.IOException; import java.net.URL; ...

  2. sql server 数据库创建链接服务器访问另外一个sql server 数据库

    继上篇在sql server中创建链接服务器访问oracle数据库:http://www.cnblogs.com/527289276qq/p/4770379.html 本文介绍在sql server中 ...

  3. JavaScript DOM编程艺术-学习笔记（第十二章）

    第十二章 1.本章是综合前面章节的所有东西的,一个综合实例 2.流程:①项目简介:a.获取原始资料(包括文本.图片.音视频等) b.站点结构(文件目录结构) c.页面(文件)结构 ②设计(切图) ③c ...

  4. C 语言学习准备

    摘要:用 C#语言学习了一些数据结构,突然想学习 C 语言,为了学习C,本文准备好资料. C 语言学习准备 作者:乌龙哈里 时间:2015-11-17 平台:Window7 64bit,Visual ...

  5. sql 将某列转换成一个字符串 for xml path用法

    declare @test table( name varchar(10)) insert into @test values('a') insert into @test values('b') i ...

  6. Windows上安装MongoDB步骤

    事前准备: 1.在mongoDB官网下载.msi文件,我下的是社区版,下载地址:https://www.mongodb.com/download-center#community 2.点击msi文件安 ...

  7. 有关Flash中与Java调用时候注意的一些事项

    1.构建本地拓展的ActionScript库时候要注意SWF文件的版本兼容性: 参考:http://help.adobe.com/zh_CN/air/extensions/WS99209310cacd ...

  8. ggplot2 geom设置—散点图

    散点图也是目前R中的常用的图形之一 geom_point(mapping = NULL, data = NULL, stat = "identity", position = &q ...

  9. hdu_5877_Weak Pair(离散+DFS+树状数组)

    题目链接:hdu_5877_Weak Pair 题意: 给你一棵树,让你找有多少对满足那两个条件的weak pair 题解: 有人用Treap,我不会,然后我用树状数组+离散来替代Treap,用DFS ...

  10. Unity开发Oculus游戏

    1.下载Oculus对应自己操作系统的SKD&RunTime 下载地址 我这里是window系统,下载的是0.6.0.0版本的 2.安装RunTime,电脑右下角状态栏会出现一个小眼睛表示安装 ...