<!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. Searching in a Radius using Postgres[Marked]

    Searching in a Radius using Postgres Creating a GEO application has never been easier. You can have ...

  2. SecureCRT介绍、安装、使用

    简介 SecureCRT是一款支持SSH(SSH1和SSH2)的终端仿真程序,简单地说是Windows下登录UNIX或Linux服务器主机的软件. SecureCRT支持SSH,同时支持Telnet和 ...

  3. HTTP全部报文首部字段

    总结了一下HTTP各种报文首部字段. HTTP报文类型与结构 HTTP报文结构 报文首部 空行(CR+LF) 报文主体 HTTP报文类型 http有两种类型报文,请求报文和响应报文两种报文的首部结构如 ...

  4. 作业调度框架 Quartz.NET 2.0 StepByStep

    注:目前网上诸多介绍Quartz.net的文章,甚至Quartz.net官网上的Tutorial都是1.0版本的,而这个项目在2.0版本对项目进行了比较大规模的修改,使得原有的很多例子都不能运行,故写 ...

  5. BZOJ 1103 大都市

    dfs序+BIT. #include<iostream> #include<cstdio> #include<cstring> #include<algori ...

  6. 信息熵 Information Theory

    信息论(Information Theory)是概率论与数理统计的一个分枝.用于信息处理.信息熵.通信系统.数据传输.率失真理论.密码学.信噪比.数据压缩和相关课题.本文主要罗列一些基于熵的概念及其意 ...

  7. 【NYOJ-187】快速查找素数—— 枚举法、筛选法、打表法

    快速查找素数 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 现在给你一个正整数N,要你快速的找出在2.....N这些数里面所有的素数. 输入 给出一个正整数数N(N ...

  8. dubbo-admin在jdk 1.8上部署出错问题

    今天在linux上部署dubbo-admin-2.5.4,一直报错: ERROR context.ContextLoader - Context initialization failedorg.sp ...

  9. android 中如何获取camera当前状态

    /** * 测试当前摄像头能否被使用 * * @return */ public static boolean isCameraCanUse() { boolean canUse = true; Ca ...

  10. MBTiles地图瓦片管理工具

    采用C#+GMap.NET+MBTiles数据库来实现. 具有以下功能: 1)  支持单个文件追加到mbtiles数据库. 2)  支持批量导入Google切片组织的地图瓦片. 3)  支持直接对MB ...