<!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. [POJ3264]Balanced Lineup(RMQ, ST算法)

    题目链接:http://poj.org/problem?id=3264 典型RMQ,这道题被我鞭尸了三遍也是醉了…这回用新学的st算法. st算法本身是一个区间dp,利用的性质就是相邻两个区间的最值的 ...

  2. h-index

    https://leetcode.com/problems/h-index/ https://leetcode.com/mockinterview/session/result/xjcpjlh/ 看了 ...

  3. ArcGis Javascript API (V3.6)加载天地图

    Arcgis的Javascript api开发很活跃,不知不觉都发布了3.6的版本了.该版本基于dojo 1.8.3开发的. 从dojo 1.8开始,AMD机制用得越来越多了,而且require([& ...

  4. 配置域名服务器报错named[822]: dns_rdata_fromtext /etc/bind/db.asertest.com mail not a valid number

    问题描述: 为了配置邮件服务器,更改了相关域名,改完后,重启bind9报错 Mar 17 14:39:39 DnsServer2 named[822]: dns_rdata_fromtext: /et ...

  5. UIImagePicker照片选择器

    UIImagePickerController 1.+(BOOL)isSourceTypeAvailable:(UIImagePickerControllerSourceType)sourceType ...

  6. type tips

    网上有这么一篇文章,全文如下:http://bbs.9ria.com/blog-220191-18429.html AS3中一共有以下六种获取变量类型的方法:   typeof  instanceof ...

  7. php 获取指定日期所在月份的最后一天

    本文引用来自 http://hi.baidu.com/yflife/item/fd00ef142c5967fcdceeca84 php 获取指定月最后一天: <?phpfunction gett ...

  8. 【转】shell脚本调试（bash trap support bashdb ）

    原文网址:http://zhu8337797.blog.163.com/blog/static/170617549201122512712136/ 命 令 选 项 功 能 bash –x 脚本名 回显 ...

  9. 不可或缺的 sendEmail

    还在为Linux下没有便捷的邮件程序苦恼,还在为复杂的邮件服务器架设Google N多网页? 对于小型,便捷的Linux下命令行邮件程序,sendEmail使得这一切变得轻松可行.一起来看看吧. 一. ...

  10. 下载个jquery-easyui-1.3.0使用，把他导入到myeclipse10里，jquery-1.7.2.min.js报错。 错误如下， Syntax error on token "Invalid Regular Expression Options", no accurate correc

    1.选中报错的jquery文件“jquery-1.2.6.min.js”.2.右键选择 MyEclipse-->Exclude From Validation .3.再右键选择 MyEclips ...