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 面向对象的技术创建高级 Web 应用程序
Feb 25 Javascript
js 用CreateElement动态创建标签示例
Nov 20 Javascript
JavaScript判断变量是否为undefined的两种写法区别
Dec 04 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
Jun 16 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
May 16 Javascript
jQuery寻找n以内完全数的方法
Jun 24 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
js跨域资源共享 基础篇
Jul 02 Javascript
vue里如何主动销毁keep-alive缓存的组件
Mar 21 Javascript
layui对工具条进行选择性的显示方法
Sep 19 Javascript
nuxt 每个页面head标签内容设置方式
Nov 05 Javascript
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
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实现图片简单上传
2006/10/09 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
jquery div 居中技巧应用介绍
2012/11/24 Javascript
jquery无刷新验证邮箱地址实现实例
2014/02/19 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
js+html5实现canvas绘制圆形图案的方法
2015/06/05 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
js命名空间写法示例
2015/12/18 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
2016/06/17 Javascript
Jquery Easyui日历组件Calender使用详解(23)
2016/12/18 Javascript
微信小程序 弹窗自定义实例代码
2017/03/08 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
2020/06/01 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
python持久性管理pickle模块详细介绍
2015/02/18 Python
简单了解python模块概念
2018/01/11 Python
python算法与数据结构之冒泡排序实例详解
2019/06/22 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
从一次项目重构说起CSS3自定义变量在项目的使用方法
2021/03/01 HTML / CSS
html+css实现自定义图片上传按钮功能
2019/09/04 HTML / CSS
大学生冰淇淋店商业计划书
2014/01/14 职场文书
销售经理工作职责
2014/02/03 职场文书
总经理的岗位职责
2014/02/23 职场文书
2014三八妇女节活动总结
2014/03/01 职场文书
人力资源主管的岗位职责
2014/03/15 职场文书
本科毕业生求职自荐信
2014/04/09 职场文书
银行业务授权委托书
2014/10/10 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
世界遗产导游词
2015/02/13 职场文书
同事离别感言
2015/08/04 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书
nginx服务器的下载安装与使用详解
2021/08/02 Servers