javascript完美实现图片拖动改变顺序
在web页面中,需要改变多个元素的位置,可以通过元素拖动来实现。HTML5中加入了一个全局属性draggable,通过设置true/false来控制元素是否可拖动。
下面以图片拖动为例,用jQuery来实现:页面上有多个图片,把一个图片拖动到其他两个图片中间,就可以将这个图片的位置插入到两图之间。
html> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).ready(function() { // 正在拖动的图片的父级DIV
var $srcImgDiv = null; // 开始拖动
$(".img-div img").bind("dragstart", function() {
$srcImgDiv = $(this).parent();
}); // 拖动到.drop-left,.drop-right上方时触发的事件
$(".drop-left,.drop-right").bind("dragover", function(event) { // 必须通过event.preventDefault()来设置允许拖放
event.preventDefault();
}); // 结束拖动放开鼠标的事件
$(".drop-left").bind("drop", function(event) {
event.preventDefault();
if($srcImgDiv[0] != $(this).parent()[0]) {
$(this).parent().before($srcImgDiv);
}
});
$(".drop-right").bind("drop", function(event) {
event.preventDefault();
if($srcImgDiv[0] != $(this).parent()[0]) {
$(this).parent().after($srcImgDiv);
}
}); });
</script>
dragstart是开始拖动元素的事件,dragover是拖动到元素上方的事件,drop是拖动结束松开鼠标的事件。
draggable="true"表示img元素是可以拖动的,不过实际上img默认就是可拖动的,所以这个属性也可以去掉,如果要拖动div元素那么就需要设置draggable="true"。
class为drop-left和drop-right的div元素放在图片的左右侧,用于接收其他图片拖动到这个位置。
javascript完美实现图片拖动改变顺序的更多相关文章
- javascript 实现图片拖动
javascript实现图片拖动效果并不难,主要的思路如下 1:给图片绑定监听鼠标按下对象,设置拖动属性为true 2:鼠标抬起:拖动属性为false 鼠标移动:改变坐标即可,新坐标=图片原始坐标+鼠 ...
- JavaScript修改Canvas图片
用JavaScript修改Canvas图片的分辨率(DPI) 应用场景: 仓库每次发货需要打印标签, Canvas根据从数据库读取的产品信息可以生成标签JPG, 但是这个JPG图片的默认分辨率(D ...
- 用javascript协助导入图片
用javascript协助导入图片 需求 先说说需求.春节回家见爸妈,老爸迷上了摄影.他把平时的照片都上传到了 成都图片网, 这个成都图片网专门有一个 "快拍成都" 的版块,用于大 ...
- JS控制图片拖动 放大 缩小 旋转 支持滚轮放大缩小 IE有效
<html> <head> <title>图片拖动,放大,缩小,转向</title> <script type="text/ja ...
- JS 实现 ResizeBar,可拖动改变两个区域(带iframe)大小
将网页化成两个区域,左边区域是一个树结构,右边区域是一个iframe,点击左边区域时,右边区域加载页面.实现功能:在两个区域间加一个可拖动条,拖动时改变左右两个区域的大小.在Google上搜索slid ...
- Android:图片中叠加文字,支持拖动改变位置
之所以做了这么一个Demo,是由于近期项目中有一个奇葩的需求:用户拍摄照片后,分享到微信的同一时候加入备注,想获取用户在微信的弹出框输入的内容.保存在自己的server上.而其实,这个内容程序是无法获 ...
- 借助JavaScript中的Dom属性改变Html中Table边框的颜色
借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页 ...
- 借助JavaScript中的时间函数改变Html中Table边框的颜色
借助JavaScript中的时间函数改变Html中Table边框的颜色 <html> <head> <meta http-equiv="Content-Type ...
- jQuery实现鼠标拖动改变Div高度
最近项目中需要在DashBoard页面做一个事件通知栏,该通知栏固定位于页面底部,鼠标拖动该DIV实现自动改变高度扩展内容显示区域. 以下是一个设计原型,基于jQuery实现,只实现了拖动效果,没有做 ...
随机推荐
- ssh转发
ssh有3种转发:本地转发,远程转发,动态转发. 1.本地转发:当client和ssh-client的方向一致的时候,就是本地转发. 限制:1)client直接访问server被防火墙阻挡.2)ssh ...
- asp.net core中使用log4net
和之前的ASP.NET MVC中的使用LOG4NET的方法有些不同,这里先记录一下,使用步骤如下 : 1. 建立 ASP.NET CORE项目中,NUGET中搜索log4net后下载安装 2. 根目录 ...
- java 分布式锁总结
第一步,自身的业务场景: 在我日常做的项目中,目前涉及了以下这些业务场景: 场景一: 比如分配任务场景.在这个场景中,由于是公司的业务后台系统,主要是用于审核人员的审核工作,并发量并不是很高,而且任务 ...
- 什么是UML?分哪两类?
统一建模语言(UML是 Unified Modeling Language的缩写)是用来对软件密集系统进行可视化建模的一种语言.UML为面向对象开发系统的产品进行说明.可视化.和编制文档的一种标准语言 ...
- 菜鸟学数据库(六)——方便快捷的开启、关闭Oracle服务
背景: 作为一个程序员,在日常的工作中,我们电脑经常需要同时运行很多程序,如:Eclipse.浏览器.即时通讯软件等,甚至经常需要打开几个Office文档或者pdf文档.这时候你的内存估计已经爆表了吧 ...
- 2-7-集合运算(A-B)∪(B-A)-线性表-第2章-《数据结构》课本源码-严蔚敏吴伟民版
课本源码部分 第2章 线性表 - 集合运算(A-B)∪(B-A) ——<数据结构>-严蔚敏.吴伟民版 ★有疑问先阅读★ 源码使用说明 链接☛☛☛ <数据结构-C语言 ...
- 【小白的CFD之旅】19 来自计算网格的困惑
经过一年的忙碌,终于又到了寒假时间,小白又满状态复活了. 这一年小白学了很多的课程,但是一年下来,小白却感觉脑袋里没留下什么东西,貌似什么东西都在考完试的那一刹那全还回给老师了.这一年学习之余,小白仍 ...
- 连接web端,mysql,返回乱码解决
参考:http://yushan.iteye.com/blog/265019
- [转载]为何 Emacs 和 Vim 被称为两大神器
Emacs 是神的编辑器,而 Vim 是编辑器之神.二者为何会有如此美誉,且听本文向你一一道来. 目 录 0. 序章:神器的传说 1. 无敌的可扩展性 1.1 可扩展性给了软件强大的生命 1.2 Em ...
- HTML 转义字符对照表
http://tool.oschina.net/commons 字符 十进制 转义字符 " " " & & & < < < &g ...