js实现图片拖动改变顺序附图


Posted in Javascript onMay 13, 2014

在web页面中,需要改变多个元素的位置,可以通过元素拖动来实现。HTML5中加入了一个全局属性draggable,通过设置true/false来控制元素是否可拖动。

下面以图片拖动为例,用jQuery来实现:页面上有多个图片,把一个图片拖动到其他两个图片中间,就可以将这个图片的位置插入到两图之间。

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.img-div img { 
width:200px; 
height:200px; 
float: left; 
} 
.img-div { 
float: left; 
} 
.drop-left,.drop-right { 
width: 50px; 
height: 200px; 
float: left; 
} 
</style> 
<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> 
</head> 
<body> 
<div class="img-div"> 
<div class="drop-left"></div> 
<img src="http://photos.tuchong.com/38538/f/6864556.jpg" draggable="true"> 
<div class="drop-right"></div> 
</div> 
<div class="img-div"> 
<div class="drop-left"></div> 
<img src="http://photos.tuchong.com/349669/f/6695960.jpg" draggable="true"> 
<div class="drop-right"></div> 
</div> 
<div class="img-div"> 
<div class="drop-left"></div> 
<img src="http://photos.tuchong.com/349669/f/6683901.jpg" draggable="true"> 
<div class="drop-right"></div> 
</div> 
<div class="img-div"> 
<div class="drop-left"></div> 
<img src="http://photos.tuchong.com/349669/f/5121337.jpg" draggable="true"> 
<div class="drop-right"></div> 
</div> 
</body> 
</html>

dragstart是开始拖动元素的事件,dragover是拖动到元素上方的事件,drop是拖动结束松开鼠标的事件。

draggable="true"表示img元素是可以拖动的,不过实际上img默认就是可拖动的,所以这个属性也可以去掉,如果要拖动div元素那么就需要设置draggable="true"。

class为drop-left和drop-right的div元素放在图片的左右侧,用于接收其他图片拖动到这个位置。

js实现图片拖动改变顺序附图

Javascript 相关文章推荐
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
May 14 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
Js利用console计算代码运行时间的方法示例
Sep 24 Javascript
Vue Promise的axios请求封装详解
Aug 13 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
Sep 07 Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 19 Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 Javascript
vue实现文字加密功能
Sep 27 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 Javascript
JavaScript 原型与原型链详情
Nov 02 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
May 13 #Javascript
js加密解密字符串可自定义密码因子
May 13 #Javascript
JavaScript用Number方法实现string转int
May 13 #Javascript
javascript中expression的用法整理
May 13 #Javascript
JS函数重载的解决方案
May 13 #Javascript
一个JS函数搞定网页标题(title)闪动效果
May 13 #Javascript
JS获得浏览器版本和操作系统版本的例子
May 13 #Javascript
You might like
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
YII框架中搜索分页jQuery写法详解
2016/12/19 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
2013/09/16 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
Jquery的each里用return true或false代替break或continue
2014/05/21 Javascript
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
js与C#进行时间戳转换
2014/11/14 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
2015/02/16 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
javascript实现多边形碰撞检测
2020/10/24 Javascript
python解析xml文件实例分享
2013/12/04 Python
python在linux中输出带颜色的文字的方法
2014/06/19 Python
Python实现计算文件夹下.h和.cpp文件的总行数
2015/04/23 Python
python如何实现内容写在图片上
2018/03/23 Python
django 环境变量配置过程详解
2019/08/06 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
会计学个人自荐信模板
2013/12/13 职场文书
数控技术专科生自我评价
2014/01/08 职场文书
在校学生职业规划范文
2014/01/08 职场文书
教室标语大全
2014/06/21 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
关于运动会广播稿50字
2014/10/18 职场文书
考试作弊检讨书
2015/01/27 职场文书
化工厂员工工作总结
2015/10/15 职场文书
观看《筑梦中国》纪录片心得体会
2016/01/18 职场文书
推荐六本经典文学奖书籍:此生必读
2019/08/22 职场文书