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

<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. 寒假学干货之------ 初学者关于fragment_main（碎片的困扰）

    我们在activity_main中编写的框架,会被fragment_main中的取代掉,是因为新版的ADT为了配合平板Android3.0开发 起作用的代码在MainActivity.java中 pa ...

  2. ftp服务器端的安装及配置

    搭建过程 安装 vsftp 服务(yum 安装即可) 配置/etc/vsftpd/vsftpd.conf   anonymous_enable=NO #禁止匿名登录 local_enable=YES ...

  3. php 中文转拼音首字母问题

    <?php /* 中文汉字转拼音首字母的PHP简易实现方法. 要求: 只能是GB2312码表里面中文字符 转换得到字符串对应的拼音首字母大写. 用法: echo zh2py::conv('Chi ...

  4. spark-2.0.0与hive-1.2.1整合

    SparkSQL与Hive的整合 1. 拷贝$HIVE_HOME/conf/hive-site.xml和hive-log4j.properties到 $SPARK_HOME/conf/ 2. 在$SP ...

  5. HTML5预览图片、异步上传文件

    注意啦:本文的代码都是以JQuery为示例,jq_开头的变量都是jq对象. 在HTML5中,我们可以在图片上传之前对图片进行预览,就像下面这么做 jq_upload_file.change(funct ...

  6. JavaScript创建读取cookie代码示例【附：跨域cookie解决办法】

    使用JavaScript 原生存取cookie代码示例: var cookie = { set : function(name, value, expires, path, domain, secur ...

  7. hdu 3631 Shortest Path

    floyd算法好像很奇妙的样子.可以做到每次加入一个点再以这个点为中间点去更新最短路,效率是n*n. #include<cstdio> #include<cstring> #i ...

  8. Vanya and Field

    Vanya and Field 题目链接:http://www.codeforces.com/problemset/problem/492/E 逆元 刚看到这题的时候一脸懵逼不知道从哪下手好,于是打表 ...

  9. 4、js内置函数

    前言:上一篇我介绍了函数的基本概念,和一些简单的Demo.其实很多函数是js内置的,我们无需自己去写,直接拿过来用即可.内置函数分为全局函数和js内置对象的函数区别:全局函数不属于任何一个内置对象.理 ...

  10. 使用 Spark MLlib 做 K-means 聚类分析[转]

    原文地址:https://www.ibm.com/developerworks/cn/opensource/os-cn-spark-practice4/ 引言 提起机器学习 (Machine Lear ...