文档章节

html5拖放学习

90后爱国
 90后爱国
发布于 2015/03/27 17:10
字数 268
阅读 22
收藏 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后爱国
粉丝 6
博文 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
282
3
7 项 Web 开发者需要了解的新技术

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

红薯
2011/09/20
6.6K
20
5个使用HTML5编写的网站和视觉手册

HTML5作为HTML标准的下一个版本,包含了很多新特性,例如内建的视频、音频标记,元素拖放等功能。在很多的Web开发中,HTML 5 已经被应用到页面编码中去,为这个优秀的下一代编码语言的推广做...

monxu
2010/03/25
207
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 眼看着这颗陨石砸了下来

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子:分享Nachtblut的单曲《Antik》 《Antik》- Nachtblut 手机党少年们想听歌,请使劲儿戳(这里) @mr_chip :上海的初雪之后有点冷 ...

小小编辑
19分钟前
14
4
Confluence 6 修改导航显示选项

选择 子页面(Child pages)来在边栏中查看当前页面的子页面。 选择 页面树(Page tree)来查看整个空间的页面树,扩展当前的页面。 你也可以选择是否完全隐藏导航显示选项或者添加你希望可见...

honeymose
51分钟前
0
0
Ubuntu18.04 安装MySQL

1.安装MySQL sudo apt-get install mysql-server 2.配置MySQL sudo mysql_secure_installation 3.设置MySQL非root用户 设置原因:配置过程为系统root权限,在构建MySQL连接时出现错误:ERROR...

AI_SKI
今天
3
0
3.6 rc脚本(start方法) 3.7 rc脚本(stop和status方法) 3.8 rc脚本(以daemon方式启动)

3.6-3.7 rc脚本(start、stop和status方法) #!/usr/bin/env python# -*- coding: utf-8 -*-# [@Version](https://my.oschina.net/u/931210) : python 2.7# [@Time](https://my.oschina.......

隐匿的蚂蚁
今天
3
0
Cnn学习相关博客

CNN卷积神经网络原理讲解+图片识别应用(附源码) 笨方法学习CNN图像识别系列 深度学习图像识别项目(中):Keras和卷积神经网络(CNN) 卷积神经网络模型部署到移动设备 使用CNN神经网络进行...

-九天-
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部