好资源导航 » 文章资讯 » jQuery 实现DOM元素拖拽交换位置的实例代码

jQuery 实现DOM元素拖拽交换位置的实例代码

2023-07-21 14:58:04 78

实现步骤

1.html+bootstrap布局画3个面板。

注：面板样式position属性必须是绝对位置或者相对位置。

2.监听面板的的mousedown事件。

记录当前对应面板的位置target_index，设置面板透明拖动。

3.监听当前被拖动的面板的mousemove事件。

根据鼠标移动的位置和面板的相对位置计算出面板应该出现的新位置，就将面板位置设置为新位置。

4.监听当前被拖动的面板的mouseup事件。

当松开鼠标时，查看当前鼠标所在位置对应的面板的位置exchange_index。对比两个位置，若不一样，说明需要交换这两个位置对应的面板内容，否则直接使被拖动面板回原位即可。

源码

html代码：




	
	jQuery拖拽交换元素的位置
	
	
	
	
	
	
	
	
	
	
	
	


	
		
			
				
					
						
							Paneltitle

Panelcontent

Panelfooter

Paneltitle Panelcontent Panelfooter

css代码：

#panelsBox>div>.panel{
	position:relative;
}

js代码：

/**
*拖拽面板到某个面板的位置，交换两个面板位置
*若没有到任意一个面板位置，则被拖拽面板回原位置
*/
$(function(){
	//1.监听mousedown事件
	$("#panelsBox").on('mousedown','.panel',function(e){
		vartarget_index=$(this).parent().attr("data-index");		//被拖动面板元素位置
		vartargetX=e.pageX-parseInt($(this).css("left"));
		vartargetY=e.pageY-parseInt($(this).css("top"));
		$(this).fadeTo(20,0.5);				//点击后开始拖动并透明
		$(this).css("z-index",100);				//设置优先展示
		
		//2.监听当前被拖拽的面板的移动事件：鼠标移动到何处，相应面板的css控制显示到何处
		$(this).mousemove(function(e){
			varx=e.pageX-targetX;				//移动时根据鼠标位置计算面板元素左上角的相对位置
			vary=e.pageY-targetY;
			$(this).css({top:y,left:x});			//设置面板元素新位置
		}).mouseup(function(e){
			//3.监听鼠标松开事件：交换面板元素，并将父级data-index换为原来的值
			$(this).fadeTo("fast",1);				//停止移动并恢复成不透明
			$(this).css("z-index",0);				//展示优先级降低
			//鼠标松开对应的面板元素的父div对应data-index
			varexchangeElem=$(document.elementFromPoint(e.pageX,e.pageY)).parents(".panel");
			
			if(exchangeElem.length>0){
				varexchange_index=$(exchangeElem[0]).parent("div").attr("data-index");
				vardevice_id_target=$(exchangeElem[0]).parent("div").attr("data-device-id");
				device_id_target=device_id_target==undefined?"":device_id_target;
				if(target_index!=exchange_index){
					//交换面板元素
					$("#panelsBox").children("div[data-index="+target_index+"]").empty().append(exchangeElem[0]);
					$("#panelsBox").children("div[data-index="+exchange_index+"]").empty().append(this);
					$("#panelsBox").children("div[data-index="+exchange_index+"]").children(".panel").css({'top':"0px",'left':"0px",'z-index':0});
					//交换data-index
					$("#deviceList").children("div[data-index="+target_index+"]")
						attr("data-index",exchange_index);
					$(document.elementFromPoint(e.pageX,e.pageY)).parents(".panel").parent()
						.attr("data-index",target_index);
				}else{
					//返回原位置
					$(this).css({'top':"0px",'left':"0px",'z-index':0});
				}
				
			}else{
				//返回原位置
				$(this).css({'top':"0px",'left':"0px",'z-index':0});
			}
		});
	});
});

总结

到此这篇关于jQuery实现DOM元素拖拽交换位置的文章就介绍到这了,更多相关jquery拖拽交换位置内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

返回顶部
514930285
czq8825@qq.com

jQuery 实现DOM元素拖拽交换位置的实例代码

热门推荐

随机推荐