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实现,只实现了拖动效果,没有做 ...
随机推荐
- Oozie介绍
1. Hadoop常见调度框架: (1)Linux Crontab:Linux自带的任务调度计划,在任务比较少的情况下,可以使用这种方式,直接执行脚本,例如添加一个执行计划: 0 12 * hive ...
- Traefik Kubernetes 初试
traefik 是一个前端负载均衡器,对于微服务架构尤其是 kubernetes 等编排工具具有良好的支持:同 nginx 等相比,traefik 能够自动感知后端容器变化,从而实现自动服务发现:今天 ...
- vivado自定IP例化的问题,怎么生成VHDL的例化
在tools 下面选中project settings.然后选targat language为VHDL .这样就会生成一个以VHDL语言为模板的ip. 转载:https://zhidao.baidu. ...
- PostgreSQL 保存json,jsonb类型
PostgresQL 字符串隐式转换JSON脚本: -- 隐式将varchar转换为json CREATE OR REPLACE FUNCTION json_in_varchar(varchar) R ...
- 2-7-集合运算(A-B)∪(B-A)-线性表-第2章-《数据结构》课本源码-严蔚敏吴伟民版
课本源码部分 第2章 线性表 - 集合运算(A-B)∪(B-A) ——<数据结构>-严蔚敏.吴伟民版 ★有疑问先阅读★ 源码使用说明 链接☛☛☛ <数据结构-C语言 ...
- lua -- 在面板中添加多个部件
function UIBagController:initItemView( ) -- 获取面板 self.panelCenter = tolua.cast(UIHelper:seekWidgetBy ...
- Gartner:2018人工智能技术成熟度曲线
https://www.secrss.com/articles/4392 人工智能被广为关注,但是一些想法恐难达到预期.本成熟度曲线将追踪AI基本趋势和未来创新,以确定人工智能技术发展的范围.状态.价 ...
- Standard C 之 math.h和float.h
对于C Standard Library 可以参考:http://www.acm.uiuc.edu/webmonkeys/book/c_guide/ 或者 http://www.cplusplus.c ...
- Unity编辑器下,界面替换NGUI字体以及字号
项目中有需要批量替换字体以及字号的需求,一般也就是多语言处理吧. 提供界面如下: 手机拍图,就这样凑合看吧.但是代码不打折. 紧急避让,我只提供修改UILabel以及UIPopupList 下的字体, ...
- 应对新型“蠕虫”式比特币勒索软件“wannacry”的紧急措施
1.防火墙屏蔽445端口 命令行操作: 以管理员打开命令行执行以下命令 netsh firewall set opmode enable netsh advfirewall firewall add ...