PHP图片拖动,JavaScript_js实现图片拖动改变顺序附图，在web页面中，需要改变多个元 - phpStudy...

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

在web页面中，需要改变多个元素的位置，可以通过元素拖动来实现。HTML5中加入了一个全局属性draggable，通过设置true/false来控制元素是否可拖动。

下面以图片拖动为例，用jQuery来实现：页面上有多个图片，把一个图片拖动到其他两个图片中间，就可以将这个图片的位置插入到两图之间。

.img-div img {

width:200px;

height:200px;

float: left;

}

.img-div {

float: left;

}

.drop-left,.drop-right {

width: 50px;

height: 200px;

float: left;

}

$(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);

}

});

});

dragstart是开始拖动元素的事件，dragover是拖动到元素上方的事件，drop是拖动结束松开鼠标的事件。

draggable="true"表示img元素是可以拖动的，不过实际上img默认就是可拖动的，所以这个属性也可以去掉，如果要拖动div元素那么就需要设置draggable="true"。

class为drop-left和drop-right的div元素放在图片的左右侧，用于接收其他图片拖动到这个位置。

相关阅读:

js实现动态创建的元素绑定事件

android获取屏幕高度和宽度的实现方法

解析mysql不重复字段值求和

MongoDB学习笔记之MapReduce使用示例

MAC修改Dock烟雾效果及设置抓屏快捷键的方法

JavaWeb动态导出Excel可弹出下载

jQuery验证插件validation使用指南

SQL Server导入导出数据时最常见的一个错误解决方法

where条件顺序不同、性能不同示例探讨

GridView中加上CheckBox 的全选功能的代码

php多任务程序实例解析

Oracle数据库使用sqlplus时的连接错误与方向键乱码解决

Nib文件是什么？Nib文件打开方法

C#创建数据库及附加数据库的操作方法