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

在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元素放在图片的左右侧，用于接收其他图片拖动到这个位置。

赞 (0)

相关推荐

  • JavaScript实现图片拖曳效果

    本文实例为大家分享了js实现图片拖曳效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #pbox{ width: 100%; height:100%; } #box{ width: 200px; height:

  • js实现使用鼠标拖拽切换图片的方法

    本文实例讲述了js实现使用鼠标拖拽切换图片的方法.分享给大家供大家参考.具体实现方法如下: <script type="text/javascript" src="js/jquery.min.js"></script> <style type="text/css"> *{margin:0;padding:0;} .m-slider{width:600px;margin:0 auto 10px !importan

  • JavaScript实现文字与图片拖拽效果的方法

    本文实例讲述了JavaScript实现文字与图片拖拽效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JavaScript实现文字与图片的拖拽效果</title> <style type="text/css"> *{padding:0;margin:0;} .tips{position:absolute;background:#eee;} </style

  • js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器

    注意使用preventDefault防止浏览器的默认事件操作发生 复制代码 代码如下: <script language="javascript" type="text/javascript"> var isDrag = false; function isIE(){ if(navigator.userAgent.indexOf("MSIE")>0){return true;} else{return false;} } fun

  • 原生JS实现拖拽图片效果

    原生JS实现拖拽图片效果

    本文实例为大家讲解了JS实现拖拽图片效果的详细代码,分享给大家供大家参考,具体内容如下 javascript event 对象的clientX,offsetX,screenX,pageX的区别: 用html5的drag来实现拖拽有兼容性问题,使用拖拽插件代码又很多,而这个拖拽demo代码少,并且兼容所有浏览器,很值得在项目中使用, css样式如下: #div1{ width: 100px; height: 100px; background-color: #4D4D4D; position: a

  • JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】

    本文实例讲述了JS实现放大.缩小及拖拽图片的方法.分享给大家供大家参考,具体如下: var divId; var v_left; var v_top; window.onload=function(){ divId = document.getElementById("block1"); var height1 = images1.height;//图片的高度 var width1 = images1.width;//图片的宽度 v_left=(document.body.client

  • javascript 网页编辑框及拖拽图片的问题

    复制代码 代码如下: function keyPress(ev){ if(ev.keyCode==13){ //在光标所在处创建一个区域. var range=document.selection.createRange(); //将区域的内容设置成为换行符. range.text="\n"; //将区域的起始点向右移动一个字符的长度. range.moveStart("character", 1); //将光标移动到区域的结尾.(若为false则是移动到起始位置)

  • js实现图片放大和拖拽特效代码分享

    js实现图片放大和拖拽特效代码分享

    本文实例讲述了js实现图片放大和拖拽特效代码.分享给大家供大家参考.具体如下: js实现图片放大和拖拽特效是一款非常实用的js特效,实现了图片的放大和拖拽功能,没用用到jquery插件,是用原生javascript实现的,除了点击放大和缩小按钮来控制图片的放大缩小,还可以使用鼠标的滚轮控制图片的缩放. 运行效果图:                               ----------------------查看效果 源码下载----------------------- 小提示:浏览

  • JS HTML5拖拽上传图片预览

    JS HTML5拖拽上传图片预览

    1.文件API:(File API) file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件.file对象继承于Blob对象,该对象表示二进制原始数据,提供slice方法,可以访问到字节内部的原始数据块.总之,file对象包含与FlieList对象,而file对象继承于Blob对象! 各对象的相关属性关系: FileReader接口: 由图可知:HTML5还提供了FileReader接口:用于将文件读入内存,并读取

  • JavaScript 图片放大镜（可拖放、缩放效果）第1/4页

    前些日子突然想做一个透镜效果,就突然想到了这个效果,于是找出当年"珍藏"的代码决定一尝所愿. 前言:这个程序主要分三部分:层的拖放.层的缩放.图片切割(包括预览). 其中层的拖放是很常见的效果,层的缩放有点难度,图片切割看着炫其实原理也很简单. 不过在实现的过程中也学习到很多以前不知道的东西,下面都会说明,希望大家从中也能学到东西. 原理: [拖放程序] 基本原理很简单,不知道的看代码就明白,其中参考了越兔和BlueDestiny的相关文章. 下面说一下比较有用的地方: [范围限制]

随机推荐