js实现图片拖动改变顺序

最新推荐文章于 2024-04-17 11:17:35 发布

原创

最新推荐文章于 2024-04-17 11:17:35 发布 · 1.4w 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery #drag #draggable #图片

本文介绍如何利用HTML5的draggable属性和jQuery实现图片的拖动排序。通过设置draggable属性为true，使图片可拖动，并利用jQuery处理拖放事件，达到改变图片顺序的效果。具体实现包括在图片两侧放置接收拖动元素的div，以便于插入新的顺序。

在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", functi