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

分手后的思念是犯贱 2022-09-13 11:20 104阅读 0赞

### 使用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);
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，104人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery实现增加和删除功能

代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti

以你之姓@/ 2022年12月02日 12:30/ 0 赞/ 193 阅读

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

使用jquery实现div左右移动更换顺序 html代码 html代码 <div class="col-md-8 col-sm-8 col-x

分手后的思念是犯贱/ 2022年09月13日 11:20/ 0 赞/ 105 阅读

相关使用jQuery实现div可拖拽功能

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

﹏ヽ暗。殇╰゛Y/ 2022年08月06日 12:16/ 0 赞/ 303 阅读

相关 jQuery实现div左右滑动

直接上代码 <body> <div class="v_out v_out_p"> <div class="prev

深藏阁楼爱情的钟/ 2022年06月10日 09:42/ 0 赞/ 348 阅读

相关 jQuery实现移动端左滑删除功能

在手机移动端，经常需要实现类似微信聊天工具中的左滑动删除和右滑动恢复功能。这里，我们可以直接使用jQuery来实现该效果。基本原理：利用jQuery中的tou

分手后的思念是犯贱/ 2022年06月05日 12:22/ 0 赞/ 538 阅读

相关 Jquery实现鼠标移动div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

待我称王封你为后i/ 2022年06月04日 04:12/ 0 赞/ 370 阅读

相关 js实现div移动

之后想做一个可以展示数据存储位置变化的示意图，前期先做简单的两列互换。首先先把格子画出来，因为想做列的移动，所以一列是一个div。 HTML： <div cl

墨蓝/ 2022年03月15日 02:26/ 0 赞/ 423 阅读

相关用jQuery实现div的上下左右移动

html代码 <input type="button" value="向左" id="left"> <input type="button" value

雨点打透心脏的1/2处/ 2022年03月10日 03:38/ 0 赞/ 580 阅读

相关负margin实现div的左右排版

使用负margin可以使当前的div左边能容纳下面的div浮动上来，因此把右边的div摆在前面，左边的摆后面，右边的使用负margin就能让左边的浮上来，这样就遮住了右边的左半

╰+攻爆jí腚メ/ 2021年10月20日 00:56/ 0 赞/ 235 阅读

相关 JQuery实现下拉框Select选项的左右移动

某网站的一个后台界面，在“负责频道”这个区域，用户可以通过按钮将左边选中的选项添加到右边，也可以将右边的选项添加到左边，或者双击选项，将其添加给对方。执行结果如下图： ![w

﹏ヽ暗。殇╰゛Y/ 2021年09月02日 05:33/ 0 赞/ 483 阅读