js实现图片拖动改变顺序

最新推荐文章于 2024-06-27 16:14:54 发布

css3html5csdn

最新推荐文章于 2024-06-27 16:14:54 发布

阅读量1.5k

点赞数 1

分类专栏： js 文章标签： js实现图片拖动改变顺序

本文链接：https://blog.csdn.net/qq_38402659/article/details/89284430

版权

本文介绍如何利用JavaScript技术实现图片的拖动功能，让用户能够通过拖动图片来改变它们的显示顺序，从而提供更直观友好的交互体验。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
<style>
	.item img {
		width:200px;
		height:200px;
		float: left;
	}
	.item{
        float: left;
        margin: 20px;
	}
	.drop-left,.drop-right {
		width: 50px;
		height: 200px;
		float: left;
	}
</style>
</head>
<body>

<div id="drag-wrap">
	<div class="item" id="wrap1">
		<img src="http://photos.tuchong.com/38538/f/6864556.jpg" id="img1" draggable="true">
	</div>
	<div class="item" id="wrap2">
		<img src="http://photos.tuchong.com/349669/f/6695960.jpg" id="img2" draggable="true">
	</div>
	<div  class="item" id="wrap3">
		<img src="http://photos.tuchong.com/349669/f/6683901.jpg" id="img3"  draggable="true">
	</div>
	<div  class="item" id