使用jquery实现div删除和左右移动更换顺序的功能

最新推荐文章于 2023-11-06 18:02:15 发布

徊忆羽菲

最新推荐文章于 2023-11-06 18:02:15 发布

阅读量370

点赞数

分类专栏： Html Jquery Javascript 文章标签： jQuery DOM操作图片排序左右移动事件处理

本文链接：https://blog.csdn.net/guo_qiangqiang/article/details/120531407

版权

Html 同时被 3 个专栏收录

254 篇文章 9 订阅

订阅专栏

Javascript

235 篇文章 6 订阅

订阅专栏

Jquery

192 篇文章 2 订阅

订阅专栏

使用jquery实现div左右移动更换顺序

- html代码

html代码

<div class="col-md-8 col-sm-8 col-xs-12 albumImages">
	<div class="albumOneImages">
		<div class="viewThumb">
		<p class="diyControl">
			<span class="diyLeft" onclick="albumLeftMove(this)"><i></i></span>
			<span class="diyCancel" onclick="if (confirm('您确实要删除该图片吗？')) dropAlbumImgResponse(this)"><i></i></span>
			<span class="diyRight" onclick="albumRightMove(this)"><i></i></span>
		</p>
		<div class="input-btn">
			<img src="https://www.qipa250.com/Product/20201028HH333820201028HH3338.png" style="width:100px;height:100px;">
		</div>
			<input type="file" class="file" style="display:none" accept="image/*">
			<input type="hidden" name="album_pic[]" class="form-control album_pic" value="Product/20201028HH333820201028HH3338.png">
		</div>
	</div>


	<div class="albumOneImages">
		<div class="viewThumb">
			<p class="diyControl">
			<span class="diyLeft" onclick="albumLeftMove(this)"><i></i></span>
			<span class="diyCancel" onclick="if (confirm('您确实要删除该图片吗？')) dropAlbumImgResponse(this)"><i></i></span>
			<span class="diyRight" onclick="albumRightMove(this)"><i></i></span>
			</p>
			<div class="input-btn">
			<img src="https://www.qipa250.com/Product/20201028HH102420201028HH1024.jpg" style="width:100px;height:100px;">
			</div>
			<input type="file" class="file" style="display:none" accept="image/*">
			<input type="hidden" name="album_pic[]" class="form-control album_pic" value="Product/20201028HH102420201028HH1024.jpg">
		</div>
	</div>

	<div class="albumOneImages">
		<div class="viewThumb">
			<p class="diyControl">
			<span class="diyLeft" onclick="albumLeftMove(this)"><i></i></span>
			<span class="diyCancel" onclick="if (confirm('您确实要删除该图片吗？')) dropAlbumImgResponse(this)"><i></i></span>
			<span class="diyRight" onclick="albumRightMove(this)"><i></i></span></p>
			<div class="input-btn">
			<img src="https://www.qipa250.com/Product/20201028HH335020201028HH3350.png" style="width:100px;height:100px;">
			</div>
			<input type="file" class="file" style="display:none" accept="image/*">
			<input type="hidden" name="album_pic[]" class="form-control album_pic" value="Product/20201028HH335020201028HH3350.png">
		</div>
	</div>

	<div class="albumOneImages">
		<div class="viewThumb">
			<p class="diyControl">
			<span class="diyLeft" onclick="albumLeftMove(this)"><i></i></span>
			<span class="diyCancel" onclick="if (confirm('您确实要删除该图片吗？')) dropAlbumImgResponse(this)"><i></i></span>
			<span class="diyRight" onclick="albumRightMove(this)"><i></i></span></p>
			<div class="input-btn">
			<img src="https://www.qipa250.com/Product/20201028HH102920201028HH1029.jpg" style="width:100px;height:100px;">
			</div>

			<input type="file" class="file" style="display:none" accept="image/*">
			<input type="hidden" name="album_pic[]" class="form-control album_pic" value="Product/20201028HH102920201028HH1029.jpg">
		</div>
	</div>

	<div class="albumOneImages">
		<div class="viewThumb">
			<p class="diyControl">
			<span class="diyLeft" onclick="albumLeftMove(this)"><i></i></span>
			<span class="diyCancel" onclick="if (confirm('您确实要删除该图片吗？')) dropAlbumImgResponse(this)"><i></i></span>
			<span class="diyRight" onclick="albumRightMove(this)"><i></i></span></p>
			<div class="input-btn">
			<img src="https://www.qipa250.com/Product/20201028HH335620201028HH3356.png" style="width:100px;height:100px;">
			</div>
			<input type="file" class="file" style="display:none" accept="image/*">
			<input type="hidden" name="album_pic[]" class="form-control album_pic" value="Product/20201028HH335620201028HH3356.png">
		</div>
	</div>

	<div class="albumOneImages">
		<div class="viewThumb">
			<p class="diyControl">
			<span class="diyLeft" onclick="albumLeftMove(this)"><i></i></span>
			<span class="diyCancel" onclick="if (confirm('您确实要删除该图片吗？')) dropAlbumImgResponse(this)"><i></i></span>
			<span class="diyRight" onclick="albumRightMove(this)"><i></i></span></p>
			<div class="input-btn">
			<img src="https://www.qipa250.com/Product/20201028HH102720201028HH1027.jpg" style="width:100px;height:100px;">
			</div>
			<input type="file" class="file" style="display:none" accept="image/*">
			<input type="hidden" name="album_pic[]" class="form-control album_pic" value="Product/20201028HH102720201028HH1027.jpg">
		</div>
	</div>

	<div class="albumOneImages">
		<div class="viewThumb">
			<p class="diyControl">
			<span class="diyLeft" onclick="albumLeftMove(this)"><i></i></span>
			<span class="diyCancel" onclick="if (confirm('您确实要删除该图片吗？')) dropAlbumImgResponse(this)"><i></i></span>
			<span class="diyRight" onclick="albumRightMove(this)"><i></i></span></p>
			<div class="input-btn">
			<img src="https://www.qipa250.com/Product/20201028HH481220201028HH4812.jpg" style="width:100px;height:100px;">
			</div>

			<input type="file" class="file" style="display:none" accept="image/*">
			<input type="hidden" name="album_pic[]" class="form-control album_pic" value="Product/20201028HH481220201028HH4812.jpg">
		</div>
	</div>
</div>


//删除相册图片
function dropAlbumImgResponse(that) {
  $(that).parent().parent().parents('.albumOneImages').remove();
}

//向左移动
function albumLeftMove(that) {
    leftLi($(that).parents('.albumOneImages').prev(), $(that).parents('.albumOneImages'));
}

//向右移动
function albumRightMove(that) {
    rightLi($(that).parents('.albumOneImages').next(), $(that).parents('.albumOneImages'));
}

//左移事件;
function leftLi($leftli, $li) {
    $li.insertBefore($leftli);
}

//右移事件;
function rightLi($rightli, $li) {
    $li.insertAfter($rightli);
}