文档章节

html5拖放学习

90后爱国
 90后爱国
发布于 2015/03/27 17:10
字数 268
阅读 19
收藏 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
北京
前端工程师
给网页设计师的30个HTML5学习资源

早在几个星期前,Adobe就发布了Dreamweaver CS5 HTML5 Pack的预览版下载。众所周知,HTML5在互联网领域掀起了一场大论战,并让Adobe的日子很难熬。HTML5致力于为前端开发提供全面的标记语 言...

晨曦之光
2012/03/09
0
0
5个使用HTML5编写的网站和视觉手册

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

monxu
2010/03/25
0
0
(转载学习)文件上传的渐进式增强

本文为转载学习 原文作者:阮一峰 原文链接:http://www.ruanyifeng.com/blog/2012/08/fileupload.html HTML5提供了一系列新的浏览器API,使得文件上传有可能出现革命性变化。英国程序员Rem...

heroShane
2014/01/24
0
0
十道或许你不熟练的前端HTML5的经典面试题

1.什么是HTML5?  答:HTML5是最新的HTML标准。   注意:讲述HTML5推出的设计目的,以及现在市场的使用情况,浏览器支持情况等。。。。 设计目的   HTML5的设计目的是为了在移动设备上支...

懿左左
06/29
0
0
WEB前端开发学习HTML5到底有多厉害?

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰
05/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

记一次winserver2003系统,https无法访问,内存占用持续增加,解决办法

先交代一下环境: win server2003系统,系统装在hyper-v虚拟机里 大概2016年底的镜像,距离今天两年左右 病症:大概9月10号左右用这个镜像还可以访问https,但是今天用这个镜像新装的系统,就...

阳阳露
13分钟前
1
0
jdbc连接orcal数据库

import java.sql.Connection;  import java.sql.DriverManager;  import java.sql.ResultSet;  import java.sql.SQLException;  import java.sql.Statement;    ......

小橙子的曼曼
38分钟前
0
0
Vue学习资料

一直以为Vue是依赖nodejs的。 作为前端也可以耦合性就很低了。 //npm包管理器 进行管理npm install vue//初始化一个项目vue init//本地调试npm run dev//编译完成 ...

大灰狼wow
47分钟前
1
0
fullcalendar重新渲染

uiCalendarConfig.calendars.lesson_calendar.fullCalendar('removeEvents');var ym = uiCalendarConfig.calendars.lesson_calendar.fullCalendar('getView').title;$scope.get_lesson(y......

人来疯啊
51分钟前
1
0
多渠道打包总结

https://www.jianshu.com/p/2130db7584c8 https://blog.csdn.net/u011153817/article/details/50772496...

塔塔米
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部