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

<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. AVAudioPlayer的锁屏播放控制和锁屏播放信息显示

    在设置这个锁屏之前,首先得设置应用支持后台音乐播放,TAGETS->Info->Required background modes->App plays audio or strea ...

  2. VS2013中使用QT插件后每次重新编译问题

    环境 系统:win7 64位旗舰版 软件:VS2013.QT5.5.1-32位.Qt5 Visual Studio Add-in1.2.4 概述 使用QT Visual Studio插件打开pro项目 ...

  3. 自定义viewpager的界面切换动画

    核心操作: 1.创建一个类实现 android.support.v4.view.ViewPager.PageTransformer 根据 position 实现判断哪个界面进行界面切换动画 publi ...

  4. css后续属性

  5. 新手购买海外VPS主机需要注意的几个账户安全问题

    一般我们用户的项目需要,可能会较多的购买海外的VPS主机项目居多,其实我也比较喜欢国内的阿里云等产品,但是后者需要的一些政策还是比较麻烦, 所以在操作一些调试项目的时候我比较倾向于选择较为便宜的海外V ...

  6. ListView上下线添加

    <com.jclick.swipelistview.byzswipemenulistview.InScrollviewSwipeMenuListView android:id="@+i ...

  7. USACO 2.4 Cow Tours

    Cow Tours Farmer John has a number of pastures on his farm. Cow paths connect some pastures with cer ...

  8. jquery.validationEngine

    引入库文件 <!DOCTYPE html> <head> <!--jQuery--> <script type="text/javascript&q ...

  9. page,request,session,application四个域对象的使用及区别

    转自:page,request,session,application四个域对象的使用及区别 1.page指当前页面.只在一个jsp页面里有效 .2.request 指从http请求到服务器处理结束, ...

  10. Node.js：常用工具util

    概要:本篇博客的主要内容是介绍node.js的常用工具util. 1.util.inherits util.inherits(constructor,superConstructor)是一个实现对象间 ...