<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

#div1{

    width:320px;

    height:50px;

    background:pink;}

</style>

<script>

window.onload = function ()

{

    var odiv = document.getElementById('div1');

    var oul = document.getElementById('ul1');

    odiv.ondragenter = function ()

    {

        odiv.innerHTML = '请释放';

    }

    odiv.ondragover = function (ev)

    {

        ev.preventDefault();

    }

    odiv.ondrop = function (ev)

    {

        ev.preventDefault();

        var fs = ev.dataTransfer.files;

        for(var i = 0; i < fs.length; i++)

        {

            if(fs[i].type.indexOf('image')!=-1)

            {

                var fd = new FileReader();

                fd.readAsDataURL(fs[i]);

                fd.onload = function ()

                {

                    var oli = document.createElement('li');

                    var oimg = document.createElement('img');

                    oimg.src = this.result;

                    oli.appendChild(oimg);

                    oul.appendChild(oli);

                }

            }

            else

            {

                alert('图片样式·')

            }

        }

    }

    odiv.ondragleave = function ()

    {

        odiv.innerHTML = '请拖拽到此区域';

    }

}

</script>

</head>

<body>

<div id="div1">请拖拽到此区域</div>

<ul id="ul1"></ul>

</body>

</html>

html5 拖拽的更多相关文章

  1. Html5拖拽复制

    拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽. Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需 ...

  2. html5拖拽

    html5拖拽一 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  3. HTML5 拖拽复制功能的实现方法

    Internet Explorer 9FirefoxOpera 12ChromeSafari 5 v1.0代码部分 <!DOCTYPE html><html><head& ...

  4. 每天一个JavaScript实例-html5拖拽

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. HTML5拖拽功能中 dataTransfer对象详解

    有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...

  6. 基于html5拖拽api实现列表的拖拽排序

    基于html5拖拽api实现列表的拖拽排序 html代码: <ul ondrop="drop_handler(event);" ondragover="dragov ...

  7. html5拖拽事件 xhr2 实现文件上传 含进度条

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. html5拖拽总结

    拖拽(Drag 和 drop)是 HTML5 标准的组成部分.拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. Internet Explorer 9.Firefox.Opera 12.Chrom ...

  9. HTML5拖拽实例

    最近应该会用到,借用一下......小妹儿,你又变懒了 拖拽相关属性 draggable属性是html5的全局属性,是html5支持拖放操作的方式之一,用来表示元素是否可以被拖放,draggable有 ...

  10. html之div拖拽，html5拖拽

    html之div拖拽 http://www.w3school.com.cn/html5/html_5_draganddrop.asp

随机推荐

  1. poj - 2431 Expedition （优先队列）

    http://poj.org/problem?id=2431 你需要驾驶一辆卡车做一次长途旅行,但是卡车每走一单位就会消耗掉一单位的油,如果没有油就走不了,为了修复卡车,卡车需要被开到距离最近的城镇, ...

  2. Android构建boot.img(二):kernel的拷贝与打包

    上文已经对boot.img其中组成部分之一ramdisk.img做了分析,boot.img另外一个重要的组成部分就是kernel了, 这里所说的kernel,可以只理解为位于out/target/pr ...

  3. MySQL 字段常用操作 添加,修改,删除,调整字段顺序

    整理备忘: 添加字段:alter table 表名Add column 字段名 字段类型  默认值 AFTER 字段名 (在哪个字段后面添加) 例子: alter table appstore_sou ...

  4. BroadcastService的测试用例

    程序运行起来之后,需要用多个telnet客户端来进行测试 连接的命令为conn deviceNumber 广播命令为broa message 需要注意的是:示例代码有bug, broadcastDic ...

  5. 总结Selenium自动化测试方法（二）测试环境搭建

    (接上期内容) 二.测试环境搭建 1.安装python 现在python3.0比python2.0多了一些改进的功能(详见http://zhidao.baidu.com/link?url=3sT1g7 ...

  6. Photoshop图层混合模式计算公式大全（转）

    混合模式可以将两个图层的色彩值紧密结合在一起,从而创造出大量的效果.在这些效果的背后实际是一些简单的数学公式在起作用.下面我将介绍photoshop cs2中所有混合模式的数学计算公式.另外还介绍了不 ...

  7. D3D中深度测试和Alpha混合的关系

    我在学习D3D的深度测试和Alpha混合的时候,有一些遗憾.书上提供的例子里说一定要先渲染不透明物体,再渲染透明物体,对渲染状态的设置也有特殊要求.我看的很晕.自己查图形学的书,上网找资料,结果还是糊 ...

  8. hdu 4856 Tunnels (bfs + 状压dp)

    题目链接 The input contains mutiple testcases. Please process till EOF.For each testcase, the first line ...

  9. 部署新浪SAE web.py Session及图片上传等问题注意事项

    1.以下几条代码解决编码问题 import sysreload(sys)sys.setdefaultencoding('utf-8') 2.图片上传问题 需要开通sina的Storage服务,随便建个 ...

  10. core--多线程

    WINDOWS是一个多线程操作系统,所谓多线程,就是在同一时间里,有多个线程同时在运行.我们上一遍说到CPU的执行序列是严格按照顺序来执行,怎么能够同一时间来执行很多程序呢?在早期答案是:window ...