web 拖放

<body><div style="height:500px;width:300px;border:1px solid red;float:left">    <img src="1.jpg" style="height:100px;width:100px;"></div>
<canvas id="canvas"height="500px" width="500px" style="border:2px solid red"></canvas><div style=" clear: both"></div><script>
var ele=document.getElementById(‘canvas‘);var canvas=ele.getContext(‘2d‘);ele.ondragover=function(e){    e.preventDefault();};ele.ondrop=function(e) {    var src = e.dataTransfer.getData("text");    var img = new Image();    img.src = src;    img.onload = function () {        canvas.drawImage(img, e.offsetX-50, e.offsetY-50,100,100);    }};
</script></body>
时间: 2024-09-28 19:52:11

web 拖放的相关文章

Html5之高级-11 拖放API (拖放事件、dataTransfer对象、setDragImage方法)

一.拖放API WEB 拖放 - 在桌面应用程序上,可以将元素从一个位置拖放到另一个位置,但在Web上,开发者没有一种能够实现这种操作的标准技术,从而在Web上去实现这个功能并不太容易 - 在 HTML5 标准中引入了拖放API,从而使我们有可能开发出于桌面应用程序完全相同的 Web应用程序 源元素事件 - 在拖放 API 中引入了一些新的事件,其中有一些元素是由源元素(拖动的元素)触发,称之为源元素事件,另一些事件由目标元素触发(源元素投放的元素) - 源元素事件: - dragstart:当

基于Extjs的web表单设计器 第四节——控件拖放

接着上一节介绍控件拖放的设计. 通过前面的介绍知道,我们的区域类型的容器控件有三种:Card.Table.Mixed. Card 可以支持几乎所有的常用控件,包括:文本TextField.多文本TextArea.数字NumberField.金额NumberField.日期DateField.下拉树NetDropDown.按钮Button.复选框CheckBox.单选框Radio:Table可以支持的常用控件比Card稍微少一点,它不支持button类型的控件以及多文本TextArea控件:Mix

基于Extjs的web表单设计器 第三节——控件拖放

看过之前设计器截图的朋友应该有印象,可能会发觉我们的设计器UI设计布局其实类似Visual studio 的设计界面,采用的是左.中.右三个区域布局.左侧为控件区域.中间为表单的画布设区域.右侧为属性区域.这样的UI设计肯定就得支持控件的拖拽设计,用户只要拖放一个控件到我们的画布上,那么画布就应该立即能够看到我们拖放的控件在画布中的位置.大小.以及一些控件自带的默认信息.不用说这样的设计对于用户来说不论在操作体验上还是设计的感官上都更加直接和方便,因为我在设计阶段就可以知道我设计后的表单在系统运

[web建站] 极客WEB大前端专家级开发工程师培训视频教程

极客WEB大前端专家级开发工程师培训视频教程  教程下载地址: http://www.fu83.cn/thread-355-1-1.html 课程目录:1.走进前端工程师的世界HTML51.HTML5与HTML4的区别2.HTML5新增的主体结构元素3.HTML5新增的的非主体结构元素 4.HTML5表单新增元素与属性5.HTML5表单新增元素与属性(续)6.HTML5改良的input元素的种类 7.HTML5增强的页面元素8.HTML5编辑API之Range对象(一)9.HTML5编辑API之

【温故而知新-Javascript】使用拖放

HTML5 添加了对拖放(drag and drop)的支持.我们之前只能依靠jQuery 这样的JavaScript库才能处理这种操作.把拖放内置到浏览器的好处是它可以正确的集成到操作系统中,而且正如将要看到的,它能跨浏览器工作. 1. 创建来源项目 我们通过 draggable属性告诉浏览器文档里的哪些元素可以被拖动.这个值有三个允许的值: 它的默认值是auto,即把决定权交给浏览器,通常来说这就意味着所有元素默认都是可拖动的,我们必须显示设置draggable 属性为false 来禁止拖动

web前端之html5开发中常用的开发工具

正所谓“工欲善其事,必先利其器”,对Web开发人员来说,好工具的使用总会给人带来事半功倍的效果.正准备学习HTML5或者已经进行了一段时间的HTML5开发的童鞋,都有必要了解下,HTML5都有哪些开发工具,哪款开发工具更适合我?下面就一一盘点下: 一.HTML5全栈开发工具之Adobe Dreamweaver 首先是大名鼎鼎的Adobe Dreamweaver,Adobe Dreamweaver 软件使设计人员和开发人员能充满自信地构建基于标准的网站.由于同新的 Adobe CS Live 在线

web前端框架

1. Bootstrap Boostrap绝对是目前最流行用得最广泛的一款框架.它是一套优美,直观并且给力的web设计工具包,可以用来开发跨浏览器兼容并且美观大气的页面.它提供了很多流行的样式简洁的UI组件,栅格系统以及一些常用的JavaScript插件. Bootstrap是用动态语言LESS写的,主要包括四部分的内容: 脚手架——全局样式,响应式的12列栅格布局系统.记住Bootstrap在默认情况下并不包括响应式布局的功能.因此,如果你的设计需要实现响应式布局,那么你需要手动开启这项功能.

WEB版一次选择多个文件进行批量上传(Plupload)的解决方案

WEB版一次选择多个文件进行批量上传(Plupload)的解决方案 转载自http://www.cnblogs.com/chillsrc/archive/2013/01/30/2883648.html 说明:Plupload支持多种浏览器,多种上传方式! 一般的WEB方式文件上传只能使用FileUpload控件进行一个文件一个文件的进行上传,就算是批量上传,也要把文件一个一个的添加到页面,无法如 windows程序一样,一次选择多个文件进行批量上传.这样在某些应用上就显得很不人性化,有时候客户希

Web前端--黑客技术揭秘(菜鸟知识)

一,Web安全的关键点 1.同源策略是众多安全策略的一个,是Web层面上的策略.很重要. 2.同源策略规定:不同域的client脚本在没明白授权的情况下.不能读写对方的资源. 3.同域要求两个网站同协议,同域名,同port. 4.当然,在同一个域内.client脚本能够随意读写同源内的资源,前提是这个资源本身是可读可写的. 5.安全类似木桶原理,短的那块板决定了木桶实际能装多少水.一个Webserver,假设其上的站点没做好权限分离,没控制好信任关系,则总体安全性就由安全性最差的那个站点决定.