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 相关文章推荐
JQUERY CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
JS获取页面窗口大小的代码解读
Dec 01 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
javascript中offset、client、scroll的属性总结
Aug 13 Javascript
js实现百度搜索提示框
Feb 05 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
Vue SPA单页应用首屏优化实践
Jun 28 Javascript
在微信小程序中保存网络图片
Feb 12 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 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新手上路(十一)
2006/10/09 PHP
PHP连接Access数据库的方法小结
2013/06/20 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
GreyBox技术总结(转)
2010/11/23 Javascript
动感效果的TAB选项卡jquery 插件
2011/07/09 Javascript
基于jQuery替换table中的内容并显示进度条的代码
2011/08/02 Javascript
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
vue 组件高级用法实例详解
2018/04/11 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
浅谈python中的正则表达式(re模块)
2017/10/17 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
python selenium执行所有测试用例并生成报告的方法
2019/02/13 Python
关于 Python opencv 使用中的 ValueError: too many values to unpack
2019/06/28 Python
python自动识别文本编码格式代码
2019/12/26 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
pycharm2020.2 配置使用的方法详解
2020/09/16 Python
如何在scrapy中捕获并处理各种异常
2020/09/28 Python
html5+css3实现一款注册表单实例
2013/04/17 HTML / CSS
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
英国玛莎百货美国官网:Marks & Spencer美国
2018/11/06 全球购物
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
财务会计实习报告体会
2013/12/20 职场文书
三方合作协议书范本
2014/04/18 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书