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

<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. HDU 2177 取(2堆)石子游戏 （威佐夫博弈）

    题目思路:威佐夫博弈: 当当前局面[a,b]为奇异局时直接输出0 否则: 1.若a==b,输出(0 0): 2.将a,b不停减一,看能否得到奇异局,若有则输出: 3.由于 ak=q*k(q为黄金分割数 ...

  2. ionic 进入多级目录以后隐藏底部导航栏（tabs）(完美解决方案)

    公司开始使用ionic开发项目,在此记录下把遇到的问题,网上有大牛已经把解决方法整出来了,不过记录在自己这里方便查阅. 这篇记录在有tabs的项目里,进入子层级时,底部导航还一直存在,本人是要让他只在 ...

  3. 训练[2]-DFS

    题目A: 题目B[https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_pro ...

  4. angular指令

    转自:http://www.cnblogs.com/rohelm/p/4051437.html 对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能. 首先来看个完整 ...

  5. win7远程连接ubuntu14.04.1桌面

    sudo apt-get install xdrp sudo apt-get install vnc4server tightserver sudo apt-get install xfce4 ech ...

  6. Java Web 开发环境快速搭建

    Java Web 开发环境快速搭建 在因某种原因更换开发设备后,可依据此文快速搭建开发环境,恢复工作环境. Java开发环境: Windows 10 (64-bit) Oralce JDK Eclip ...

  7. 第九十六节，JavaScript概述

    JavaScript概述 学习要点: 1.什么是JavaScript 2.JavaScript特点 3.JavaScript历史 4.JavaScript核心 5.开发工具集 JavaScript诞生 ...

  8. 2016腾讯we大会的时间——2016年11月6日

    作为腾讯公司主办的一场国际化创新盛会,WE大会由腾讯公司自2013年以来每年举办,WE大会已迎来第四年,每年大会都会邀请全球互联网思想家.前沿创新团队来进行现场演讲和分享,分享最前沿的思想和技术,创造 ...

  9. 一行一行分析JQ源码学习笔记-05

    创建字符串<li></li>$.function(){var str =} merge;用法 对外组数何必 对内部 还可以json合并var arr = ["a&qu ...

  10. POJ 1042 Gone Fishing#贪心

    (-￣▽￣)-* #include<iostream> #include<cstdio> #include<cstring> using namespace std ...