<!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. Linux屏幕录制gif的工具及教程

    准备 要两个工具配合使用.它们可以用命令行安装,也可以用软件管理器安装. 1,byzanz     安装后有两个命令 byzanz-record   录制,既能录制 Gif 动画,又可录制 Ogv 视 ...

  2. 第五篇 Getting Started with ORACLE EBS（开始学习ORACLE EBS）

    第一篇介绍了ERP软件是供应链管理软件.告诉你这个软件改善或提升企业管理的切入点和着力点.有了着力点才能给力. 第二篇介绍了什么是咨询以及咨询工作共通的章法,告诉了你咨询的套路是什么,就像练习一套拳, ...

  3. Linux同步机制 - 多线程开发总结

    1 对于CPU开销大的场景,能利用多核,就尽量利用多核(常常自以为某需求的运算量不大,且CPU足够快,就偷懒写个单线程,结果效率很低) 2 使用多线程的时候,默认是加锁的.在加锁保证业务正常的条件下, ...

  4. CentOS 安装 mono

    1. 安装EPEL 2. 安装软件包 yum install bison gettext glib2 freetype fontconfig libpng libpng-devel libX11 li ...

  5. [转载]mysql的binlog安全删除

    [转载]mysql的binlog安全删除  理论上,应该在配置文件/etc/my.cnf中加上binlog过期时间的配置项,expire_logs_days = 10 但是如果没有加这一项,随着产生越 ...

  6. Localizing Astah – Chinese version(simplified) is now available!

    Thanks to Abbey, now GUI in Astah Community can be shown in Chinese. As Abbey created Chinese one, a ...

  7. HDU 5344 MZL's xor (水题)

    题意:给一个序列A,设序列B的中的元素有(Ai+Aj)(1≤i,j≤n),那么求B中所有元素的异或之和.而序列A是这样来的:A1=0,Ai=(Ai−1∗m+z) mod l. 思路:相同的元素异或结果 ...

  8. php flock注意事项

    对于实际的运用,必须将其添加到所有使用的文件脚本中 但注意:其函数无法再NFS或其他网络文件系统中使用也无法在多线程服务器API中使用.

  9. Linux VPS 基本命令

    我们Linux VPS用命令才能管理他,我们来罗列一些基本和简单的Linux的命令 1.lsls / 查看根目录ls -a / 查看根目录下所要文件,包括隐藏文件ls -l / 详细列出目录下文件的权 ...

  10. An unexpected exception occurred while creating a change object. see the error log for more details

    今天再给Android项目工程中的包重命名时出现了这个错误(之前重命名的时候就没有出现,郁闷): An unexpected exception occurred while creating a c ...