angularjs结合html5的拖拽行为】的更多相关文章

闲聊: 小颖公司的项目之前要实现一个将左侧树中当前拖拽的内容,动态添加到右侧树种,虽然这个模块当时没有分给小颖,是同事完成的(小颖也不会嘻嘻),后来看了下他写代码,小颖自己写了个小demo.就当做个笔记啦嘻嘻. 先来 看看具体效果:…
前世:项目中需要拖动div,然后和某个div进行位置交换,这不是关键,关键是还要保存位置,然后在下次打开的时候按照保存的位置显示.还好本人功力深厚,一下子就想到了用localStorage来保存,事实证明真的很好用哦.保存数据的方法有了,然后开始"探索"如何用html(5)和js来实现拖拽的效果,由于H5给了比较规范的实现方式,所以在Chrome中轻松实现,万恶的IE(很少骂IE)竟然不兼容,NONONONO,心塞,只好用了两种方式分别实现拖拽效果.(其实两种方式内的代码很相似,唯一不…
本文首先发表在  码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网上找来改的,只是踩了几个坑之后就想把过程记录下来. 功能实现 下面主要介绍从浏览器外拖拽文件到浏览器进行上传的实现. 首先会介绍一些必须的基础. 拖拽事件 拖拽事件有下面这些: dragstart:当用户开始拖动对象时触发. dragenter: 当鼠标第一次经过目标元素,且有拖动发生时触发.此事件…
分享一款基于html5可拖拽图片循环滚动切换.这是一款支持手机端拖拽切换的网站图片循环滚动特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="site-wrapper"> <section id="section-header" data-coloroverlap="dark"></section> <section id="second-phase&qu…
前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性提交所有的内容进内存是不现实的.大文件带来问题还有是否支持断点传输和多文件同时传输. 本文以resumableJs为例,介绍了如何在ASP.NET中实现大文件传输.同时本文利用了Html5的新特性:支持拖拽. 本文的主要技术点在于:如何接收resumableJs的传送内容(官网不太清楚)和如何合并文件,难度并不高.如果要改为MVC中的Controller处理文件传输,方法也大同小异. 注:原博客中,此文章在原站点个人代码备份所用,注释不…
一.前言 这两天恰好有一位同事问我怎样做一个图片预览功能.作为现代人的我们首先想到的当然是HTML5啦,其实HTML5做图片预览已经是一个老生常谈的问题了.我在这里就简单说说其中相关的一些东西,当然会附上我们的源码.在 HTML5 之前我们做图片预览主流做法有两种,第一种是通过 Flash 插件来做预览,第二种是 Ajax 实现的假预览,也就是说选择图片文件后,图片其实已经异步上传到服务器,服务器处理后返回图片路径,前端得到响应结果做出处理从而使图片显示在界面上.而有了 HTML5 之后就可以强…
HTML5新增的File API, 可以获取名称.文件大小.类型等信息,需先对DOM中的Element进行拖拽事件绑定 相关API 首先获取节点,绑定拖动到该节点的事件,可以改变鼠标形状 var draghere = document.querySelector('#draghere'); draghere.addEventListener('dragover', function(e){ e.preventDefault(); e.stopPropagation(); e.dataTransf…
如图 可以从第一个方框拖拽花色到第二个方框中. 也可以再拖动回来. 具体代码实现 index.html <!DOCTYPE HTML> <html> <head> <meta charset=utf-8> <title>HTML5 Drag && Drop Demo</title> <link rel="stylesheet" href="css/main.css">…
以下是自学it网--中级班上课笔记 网址:www.zixue.it html文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"…
前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程对应的事件 我们先看下拖放的流程: 选中 ---> 拖动 ---> 释放 然后,我们一步步看下这个过程中,会发生的事情. 选中 在HTML5标准中,为了使元素可拖动,把draggable属性设置为true. 文本.图片和链接是默认可以拖放的,它们的draggable属性自动被设置成了true. 图…
前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程对应的事件 我们先看下拖放的流程: 选中 ---> 拖动 ---> 释放 然后,我们一步步看下这个过程中,会发生的事情. 选中 在HTML5标准中,为了使元素可拖动,把draggable属性设置为true. 文本.图片和链接是默认可以拖放的,它们的draggable属性自动被设置成了true. 图…
1.拖拽和释放定义: 拖拽:Drag; 释放:Drop; 2.源对象和目标对象: 3.相关API: ondragstart:源对象开始被拖动 ondrag:源对象被拖动的过程中 ondragend:源对象被拖动结束 ondragenter:目标对象被源对象拖动进入 ondragover:目标对象被源对象悬浮在上面 ondragleave:源对象拖动着离开了目标对象 ondrop:源对象拖动着在目标对象上方松手 4.拖动的源对象和目标对象之间的数据传递: 源对象数据保存:e.data.Transf…
一.前言 文件上传是一个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传.给用户体验带来很大问题.html5开始支持拖拽上传的需要的api.nodejs也是一个最近越来越流行的技术,这也是自己第一次接触nodejs,在nodejs开发中,最常用的开发框架之一是expess,它是一个类似mvc模式的框架.结合html5.nodejs express实现了拖拽上传的功能. 二.基础知识普及 1.NodeJs基础知识 nodejs简单来说就是一个可以让j…
关于canvas 的基础知识就不多说了,可以进这个网址学习 http://www.w3school.com.cn/html5/html_5_canvas.asp 对于canvas 和 SVG 其实一开始个人是比较倾向于SVG多一点,不过后来工作需要,又学习了下canvas, 这两个之间主要不同是 canvas是在JavaScript中绘制,SVG则是在 XML 绘制 其实canvas 主要的工作就是绘制图像,图表之类的工作,对于一些可操作的特效个人还是更喜欢用canvas + div 来实现: …
HTML5拖放 拖放(Drag和drop)是H5标准的组成部分 此处需具备js基础知识及其H5拖拽部分相关方法 在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondragend - 用户完成元素拖动后触发 释放目标时触发的事件: ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件 ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件 ondragleave - 当被鼠…
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>html5拖拽上传</title> <style type="text/css"> #div1{ margin: 0 auto; width:200px; height:200px; backgro…
实现多文件拖拽上传的简易Node项目,可以在github上下载,你可以先下载下来:https://github.com/Johnharvy/upLoadFiles/. 解开下载下的zip格式包,建议用webstom 运行该项目,通过app.js启动项目,如果提示找不到node.exe执行环境,请指定好你的node.exe安装位置.这里我用的express框架是3.21.2版本. 我们来简单介绍下拖拽效果是怎么实现的. 这里先看代码: <!DOCTYPE html> <html lang=…
不介绍具体情况,先看API,注意看后面括号的说明 dragstart:拖拽开始(应用于被拖拽对象) drag:拖拽中(应用于被拖拽对象) dragenter:拖拽到指定位置(应用于拖拽目标) dragleave:拖拽离开指定位置(应用于拖拽目标) dragover:拖拽在指定位置(应用于拖拽目标) drop:在指定位置释放(应用于拖拽目标) dragend:拖拽结束(应用于被拖拽对象) 事件 描述 目标 dragstart 开始拖对象时触发 被拖动对象 dragenter 当对象第一次被拖动到目…
参考资料: 张鑫旭             : http://www.zhangxinxu.com/wordpress/2011/02/html5-drag-drop-%E6%8B%96%E6%8B%BD%E4%B8%8E%E6%8B%96%E6%94%BE%E7%AE%80%E4%BB%8B/    ^_^肥仔John  :  http://www.cnblogs.com/fsjohnhuang/p/3961066.html   File API          : http://www.i…
原生拖放 一.若要一个元素可以被拖放,首先要为元素添加draggable属性 true 可以被拖放 false 不可以被拖放 auto 除img或url以外都可以被拖放 其他值 都不可以被拖放 注释:在火狐中设置draggable属性无用,但可以再dragstart事件中为dataTransfer对象中添加setData()方法后就可以允许被拖拽.支持draggable的属性的浏览器有IE10+.Firefox 4+.Safari 5+,chrome,Opera 11.5+. 二.拖拽发生过程…
首先还是看效果图吧,方便大家可以快速得知是否是自己需要的功能:(抱歉电脑还未安装动图软件,先用.png) 如果上图是你需要的功能效果图,那么请往下看,我有写出来例子哦~ 使用这个插件有几个好处,首先: 1.只需要额外引入一个依赖包.angular-sortable-view.js即可 2. 核心代码: <div ng-controller="MyController as vm" class="background"> <div sv-root s…
前言 不知道各位 coder 有没有碰到过许多重复的业务需求,比如排版相类似的报表,只不过是顺序稍微换了一下,就是一个新的页面,虽然基于模板思想来写的话也能减少不少代码,但是相对的不那么方便,笔者最近就是碰到了类似的需求,忍无可忍,遂该项目便诞生了了. 正文 演示 gif 图稍大,若加载不出来请稍等片刻 (..•˘_˘•..) 项目地址 如果觉得我有帮到什么忙的,欢迎 star,我会更有动力的 (ง •̀_•́)ง. Vue 拖拽图表 使用方法 详细的开发指南和配置参数就不在此赘言,在项目文档中…
1. 将客户端(本地电脑)中的图片拖到网页中 要点: html5 拖放, FileReader html: <div id="container" ondrop="drop(event)"></div> js代码: function drop(event) { var file = event.dataTransfer.file[0]; var fileReader = new FileReader(); fileReader.readAsD…
关键字:HTML5, Drag&Drop, JavaScript, CSS 运行环境:Chrome <!DOCTYPE html> <html> <head> <title>example</title> <style type="text/css"> .main-area { margin-left: 10%; margin-right: 10%; min-width: 600px; } ul { pad…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…
引用一篇博客,讲解的比较详细:http://www.tuicool.com/articles/j6Zbam…
JS文件: var FileName = ""; var FileStr = ""; (function () { function $id(id) { return document.getElementById(id); } function Output(msg) { var m = $id("filedrag"); m.innerHTML = msg + m.innerHTML; } function FileDragHover(e) {…
一. Html5的拖拽行为 1.设置元素为可拖放:把draggable属性设置为true. example: <div id="drag1" draggable="true"></div> (注:img和带href的a默认是auto,表示可拖拽,其他的元素都是不可拖拽.为安全起见,建议对可拖拽元素都添加draggable='true'设置) 2.拖拽元素事件: 1). dragstart:拖拽前触发,即鼠标按下,被拖拽元素被拖拽的瞬间触发.…
使用HTML5的文件API,可以将操作系统中的文件拖放到浏览器的指定区域,实现文件上传到服务器.本文将结合实例讲解HTML5+jQuery+PHP实现拖拽上传图片的过程,来看下HTML5的魅力吧. HTML 我们在页面中放置一个拖拽区域#drop_area,即接收拖拽的区域,#preview用来预览拖拽上传的图片信息. <div id="drop_area">将图片拖拽到此区域</div> <div id="preview">&l…
人人网首页拖拽上传详解(HTML5 Drag&Drop.FileReader API.formdata) 2011年12月11日 | 彬Go 上一篇:给力的 Google HTML5 训练营(HTML5 Drag&Drop 拖拽.FileReader实例教程) « 下一篇:   早在公元2011年6月3日傍晚,人人网推出了一个很装B且完全无视IE浏览器的功能——拖拽上床.哦,Sorry, 是拖拽上传.到现在,这个功能已经上线了整整半年,这篇文章也足足拖延了半年才分享给大家,实在是对不住了,…