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 相关文章推荐
JS打印gridview实现原理及代码
Feb 05 Javascript
jQuery 属性选择器element[herf*='value']使用示例
Oct 20 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
Dec 28 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 Javascript
javascript实现密码验证
Nov 10 Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
angular 内存溢出的问题解决
Jul 12 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
基于vue-draggable 实现三级拖动排序效果
Jan 10 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
php正则表达式(regar expression)
2011/09/10 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
ThinkPHP登录功能的实现方法
2014/08/20 PHP
PHP多文件上传类实例
2015/03/07 PHP
PHP 错误处理机制
2015/07/06 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
js仿淘宝和百度文库的评分功能
2016/05/15 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
Websocket协议详解及简单实例代码
2016/12/12 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
详解Python中用于计算指数的exp()方法
2015/05/14 Python
Python实现基本线性数据结构
2016/08/22 Python
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
python 多线程死锁问题的解决方案
2020/08/25 Python
css3中transition属性详解
2014/09/02 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
护士检查书
2014/01/17 职场文书
中文专业学生自我评价范文
2014/02/06 职场文书
机关作风建设心得体会
2014/10/22 职场文书
个人学习总结范文
2015/02/15 职场文书
2015年店长个人工作总结
2015/10/23 职场文书
MySQL Server 层四个日志
2022/03/31 MySQL
德生2P3收音机开箱评测
2022/04/30 无线电