拖动图片，改变图片位置

2024年3月25日 50次阅读 来源: qq_40974141

js部分

// 正在拖动的图片的父级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);
			}
		});

css部分

.drop-left,.drop-right {
	width: 20px;
	height: 90px;
	float: left;
}

html部分

<div class="img-div" style="position: relative; float: left;">
<div class="drop-left"></div>
	  <img src="**" style="width: 70px; height: 70px; padding: 10px;-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;" layer-index="0">
</div>

<div class="img-div" style="position: relative; float: left;">
<div class="drop-left"></div>
	  <img src="**" style="width: 70px; height: 70px; padding: 10px;-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;" layer-index="0">
</div>

<div class="img-div" style="position: relative; float: left;">
<div class="drop-left"></div>
	  <img src="**" style="width: 70px; height: 70px; padding: 10px;-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;" layer-index="0">
</div>
    原文作者：qq_40974141
    原文地址: https://blog.csdn.net/qq_40974141/article/details/90045451
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞