文档章节

html5拖放学习

90后爱国
 90后爱国
发布于 2015/03/27 17:10
字数 268
阅读 23
收藏 0
  1. 在网页上拖放;

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #div1 {width:300px;height:200px;padding:10px;background-color:#cccccc;}
    </style>
    <script>
        function allowDrop(ev)
        {
            ev.preventDefault();
        }

        function drag(ev)
        {
            //得到拖拽数据  添加id 如“testImg”
            ev.dataTransfer.setData("testImg",ev.target.id);
        }

        function drop(ev)
        {
            //调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
            ev.preventDefault();
            var data=ev.dataTransfer.getData("testImg");
            ev.target.appendChild(document.getElementById(data)); //把被拖元素追加到放置元素(目标元素)中
        }
    </script>
</head>
<body>

<p>拖动图片到灰色矩形中:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="81.jpg" draggable="true" ondragstart="drag(event)">
</body>
</html>

 2.  在本地拖放图片到网页上;

index3.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #imgcontainer{
            margin: 0;
            padding: 0;
            width: 400px;
            height: 400px;
            background-color: #cccccc;
        }
    </style>
    <script src="app3.js"></script>
</head>
<body>
<div id="imgcontainer">
</div>
<div id="showmsg"></div>
</body>
</html>


app3.js

var imgContainer,msgDiv;
window.onload = function(){
    imgContainer = document.getElementById("imgcontainer");
    msgDiv = document.getElementById("showmsg");
    imgContainer.ondragover = function(e){

        e.preventDefault();
    }
    imgContainer.ondrop = function(e){

        e.preventDefault();
       //得到要上传的图片数据
        var f = e.dataTransfer.files[0];
        var fileReader = new FileReader();
        fileReader.onload = function(e){
            //将其现实到指定区域
            imgContainer.innerHTML = "<img src=\""+ fileReader.result+"\">"

        }
        fileReader.readAsDataURL(f);


    }
}


© 著作权归作者所有

90后爱国
粉丝 7
博文 85
码字总数 45624
作品 0
北京
前端工程师
私信 提问
为开发者和设计者准备的 HTML5 文件上传教程

本文主要是收集了一些使用 HTML5 进行文件上传的教程: 纯 HTML5 文件上传 带进度条的 HTML5 文件上传 HTML5 拖放式文件上传的 API 教程 全新的 HTML5 多文件上传 使用 jQuery 的 HTML5 文件...

红薯
2012/01/18
2.2K
4
HTML5 拖放 -- 如何在相册间进行拖放照片排序

HTML5 拖放 -- 如何在相册间进行拖放照片排序 今天我来给大家讲解一下 HTML5 的拖放。我们都知道,当前流行的浏览器(IE,FF,Safari,Chrome以及Opera),都有一些原生支持的功能(比如拖放功能)...

junwong
2012/04/14
2.5K
1
求。。HTML 5

HTML5 主要新功能 本地音频视频播放 动画 地理信息 硬件加速 本地运行(即使在 Internet 连接中断之后) 本地存储 从桌面拖放文件到浏览器上传 语义化标记 最近才稍稍看了下 HTML5 的介绍。。...

Allen_My
2011/05/21
283
3
7 项 Web 开发者需要了解的新技术

Web 开发者需要经常更新他们的知识,学习新的技术,如果他们还想继续在 Web 开发领域混并混得还不错的话。下面将为你展示 7 项新的Web开发技术,作为一个Web开发人员,你需要了解、熟悉并学会...

红薯
2011/09/20
6.7K
20
好程序员技术分享html5和JavaScript的区别

好程序员技术分享html5和JavaScript的区别,HTML5广义上讲是前端开发学科的代名词,包含HTML5、CSS3及JavaScript三个重要的部分,是运行在浏览器上应用的统称。如PC端网站、管理系统、手机网...

好程序员IT
04/26
17
0

没有更多内容

加载失败,请刷新页面

加载更多

自建redis笔记

自建redis笔记 最近在linux安装了一下redis,特做一些笔记! 本文先单节点启动redis,然后再进行持久化配置,在次基础上,再分享搭建主从模式的配置以及Sentinel 哨兵模式及集群的搭建 单节点...

北极之北
9分钟前
1
0
vue+element之多表单验证

方法一:利用promise var p1=new Promise(function(resolve, reject) { this.$refs[form1].validate((valid) => { if(valid){ ......

沉迷代码我爱学习
11分钟前
1
0
golang 1.13 errors 包 新函数介绍

引 这次 errors 包算重量级更新。很有更能把以前的一些设计模式给推到。下面聊下用法。 error 装包 以前返回一个错误,想要保存 error 链,还要定义结构体保存以前的 error 信息。感兴趣看下...

guonaihong
20分钟前
30
0
并发编程之线程池

一、线程池 1、什么是线程池 Java中的线程池是运用场景最多的并发框架,几乎所有需要异步或并发执行任务的程序 都可以使用线程池。在开发过程中,合理地使用线程池能够带来3个好处。 第一:降...

codeobj
22分钟前
2
0
知识点总结思维导图模板分享,良心安利,建议收藏

思维导图经常被用在学习中,对大脑思维进行发散,对知识进行记忆。使用思维导图可以让知识更加简单更有层次。下面是利用思维导图所绘制的几款知识点总结思维导图模板,大家可以进行进行参考使...

干货趣分享
25分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部