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写法
Sep 15 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
Jun 21 Javascript
当某个文本框成为焦点时即清除文本框内容
Apr 28 Javascript
Ionic如何创建APP项目
Jun 03 Javascript
如何用js判断dom是否有存在某class的值
Feb 13 Javascript
Node.JS文件系统解析实例详解
May 15 Javascript
JS控制鼠标拒绝点击某一按钮的实例
Dec 29 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
Jan 10 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 Javascript
Javascript异步执行不按顺序解决方案
Apr 30 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 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数组 为文章加关键字连接 文章内容自动加链接
2011/12/29 PHP
JSON在PHP中的应用介绍
2012/09/08 PHP
PHP实现的一致性Hash算法详解【分布式算法】
2018/03/31 PHP
PHP xpath()函数讲解
2019/02/11 PHP
(function(){})()的用法与优点
2007/03/11 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
2010/06/05 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
js获取location.href的参数实例代码
2013/08/02 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
简介JavaScript中的setDate()方法的使用
2015/06/11 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
浅析Vue中method与computed的区别
2018/03/06 Javascript
es6数据变更同步到视图层的方法
2019/03/04 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
python实现逆波兰计算表达式实例详解
2015/05/06 Python
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
Python 提取dict转换为xml/json/table并输出的实现代码
2016/08/28 Python
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
python操作kafka实践的示例代码
2019/06/19 Python
python3.6编写的单元测试示例
2019/08/17 Python
Canvas 像素处理之改变透明度的实现代码
2019/01/08 HTML / CSS
拖鞋店创业计划书
2014/01/15 职场文书
幼儿评语大全
2014/04/30 职场文书
改革共识倡议书
2014/08/29 职场文书
2014年英语工作总结
2014/12/20 职场文书
2016高校自主招生自荐信范文
2016/01/28 职场文书
Python 如何实现文件自动去重
2021/06/02 Python
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript
Python数据结构之队列详解
2022/03/21 Python