每天學一個jquery外掛-做拖動效果1

做拖動效果1

目標效果是從B站看到的側邊選單拖動選單順序的效果，不過沒做完，難受。

目標效果和目前效果
在這裡插入圖片描述

程式碼部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>做拖動效果</title>
		<script src="js/jquery-3.4.1.min.js"> 
</script>
		<style>
			*{
				margin: 0px;
				padding: 0px;
				user-select: none;
			}
			#ui{
				border: 1px solid lightgray;
				display:inline-block;
				margin: 20px;
				position: relative;
			}
			.li{
				width: 80px;
				height: 20px;
				display: flex;
				justify-content: center;
				align-items 
: center;
				font-size: 12px;
			}
			.che{
				background-color: rgb(0,161,214);
				color: white;
				position:absolute;
			}
		</style>
	</head>
	<body>
		<div id="ui">
			<div class="li">選單1</div>
			<div class="li">選單2</div> 

			<div class="li">選單3</div>
			<div class="li">選單4</div>
			<div class="li">選單5</div>
			<div class="li">選單6</div>
			<div class="li">選單7</div>
			<div class="li">選單8</div>
			<div class="li">選單9</div>
			<div class="li">選單10</div>
			<div class="li">選單11</div>
			<div class="li">選單12</div>
			<div class="li">選單13</div>
			<div class="li">選單14</div>
			<div class="li">選單15</div>
		</div>
	</body>
</html>
<script>
	$(function(){
		var $tc  =$("<div class='li'></div>")//填充部分
		var fl = 0;
		//假如滑鼠按下了，就浮動這個dom並且製造一個臨時的dom填充位置
		$(".li").mousedown(function(e){
			var that = $(this);
			that.attr("data-flag","1");
			that.after($tc)
			$(".li").removeClass("che");
			that.addClass("che");
			var y  =that[0].offsetTop;
			that.css("top",y);
			fl = e.offsetY;
		})
		//按下拖動的過程中，處於absolute狀態的dom不斷校正自己與滑鼠相同的位置，同時監控它與填充dom的位置差距，只要超過一個li的高度那麼就向上或者向下挪動這個dom的位置，以此達到預設的效果拖動的效果，當然還得有邊界效果，拖至頂端或者底部都應該要正確的反饋效果
		$(".li").mousemove(function(e){
			var that =$(this);
			var par  =$("#ui")
			var flag = $(this).attr("data-flag");
			if(flag==1){
				var y  =e.offsetY
				console.log(y)
			}
		})
		
		
		//假如滑鼠放鬆了，就把當前拖拽的這個替換掉填充的dom
		$(".li").mouseup(function(e){
			var that = $(this);
			that.attr("data-flag","0");
			$(".li").removeClass("che");
			$tc.remove();
		})
	})
</script>

思路解釋

js裡面註釋打了思路
問題就是我沒法獲得通過mousemove獲得此時event對於這個容器的相對位置，按照這個辦法獲取到的位置全被上面的子容器搞沒了，又沒辦法，難受，還是沒有找到辦法。
沒完，明天再想想怎麼搞。

每天學一個jquery外掛-做拖動效果1

每天學一個jquery外掛-做拖動效果1

做拖動效果1

每天學一個jquery外掛-做拖動效果1

每天學一個jquery外掛-做個點名器

每天學一個jquery外掛-仿樓梯滾動

每天學一個jquery外掛-彈出提示框2

每天學一個jquery外掛-圖示的動畫

每天學一個jquery外掛-記分牌效果

每天學一個jquery外掛-B站的景深

每天學一個jquery外掛-密碼的等級

每天學一個jquery外掛-滑鼠的特效

每天學一個jquery外掛-css實現電風扇2

每天學一個jquery外掛-五角星打分

每天學一個jquery外掛-五角星打分2

每天學一個jquery外掛-省市縣聯動

每天學一個jquery外掛-滑動的底邊

每天學一個jquery外掛-自定義標題

每天學一個jquery拆件-圖片的預覽

在vue專案中使用BetterScroll外掛(3)-拖動導航條定位

jQuery實現滑鼠拖動圖片功能

js實現適配移動端的拖動效果

JS實現容器模組左右拖動效果

每天學一個jquery外掛-做拖動效果1

每天學一個jquery外掛-做拖動效果1

做拖動效果1

相關推薦