原生實現元素的拖拽

ACodingIceBear發表於2017-12-25

最近在學習jQuery，真的很強大！在jQuery的ui外掛裡有一個draggable，可以搞定拖拽，不用再用原生的去計算差值，同時還提供了一些常用值得獲取方法。

jQuery的UI外掛官網API

$(".dragger").draggable({
	"containment" : ".stage" , 
	"axis": "X",
	"drag" : function(event , ui){
		var left = ui.position.left;
		var top = ui.position.top;
	}
});
複製程式碼

上面程式碼中列出常用的三個屬性

containment

可以理解是被拖拽的元素.dragger活動的舞臺，只在:後面的.stage的範圍內活動；

官網的API Multiple types supported:

  • Selector: The draggable element will be contained to the bounding box of the first element found by the selector. If no element is found, no containment will be set.
  • Element: The draggable element will be contained to the bounding box of this element.
  • String: Possible values: "parent", "document", "window".
  • Array: An array defining a bounding box in the form [ x1, y1, x2, y2 ].

axis

被拖拽元素的活動方向，X表示只沿x軸拖動，Y表示只沿y軸拖動。

drag

drag的值為一個函式，函式內可以理解為拖拽之後要做的事情。 其中ui提供了position和offset方法，獲取拖拽物件的實時定位left和top值，通過ui.position.left獲取，這個值會隨著元素的重新定位而改變。

position Type: Object Current CSS position of the helper as { top, left } object. The values may be changed to modify where the element will be positioned. This is useful for custom containment, snapping, etc.

offset Type: Object Current offset position of the helper as { top, left } object.

下面用原生的方法實現拖拽

思路：在滑鼠點選時，記錄當時的位置，滑鼠移動在點選之後，所以在onmousedown裡註冊onmousemove事件，計算出滑鼠實時位置與起始位置的差值，將差值賦值給被拖動的元素，就可以看起來好像是在拖拽一樣的效果了。

  • html和css部分
	#stage{
		width: 1200px;
		height: 800px;
		margin: 50px;
		border: 1px solid #eee;
		position: relative;
	}
	.dragger{
		position: absolute;
		width: 200px;
		height: 80px;
		border: 1px solid #eee;
		box-shadow: 2px 2px 5px rgba(0,0,0,.4);
		background-image: -webkit-linear-gradient(top, skyblue, white 70%);
	}

	<div id="stage">
		<div class="dragger"></div>
	</div>
複製程式碼
  • js程式碼
		var stage = document.getElementById("stage");
		var dragger = document.getElementsByClassName("dragger")[0];
		var startLeft = 0,
			startTop = 0,
			diffX,
			diffY;
		//滑鼠點選事件新增給將要拖拽的盒子
		dragger.onmousedown = function(event){
			//記錄開始點選的位置
			var startX = event.pageX;
			var startY = event.pageY;
			//新增滑鼠移動事件給stage
			stage.onmousemove = function(event){
				//計算出差值
				diffX = event.pageX - startX;
				diffY = event.pageY - startY;
				//設定給dragger定位值
				dragger.style.left = startLeft + diffX + 'px';
				dragger.style.top = startTop + diffY + 'px';
			}

		}

		document.onmouseup = function(event){
			stage.onmousemove = null;

			startLeft += diffX;
			startTop += diffY;
		}
複製程式碼

最後的滑鼠離開事件新增給document，因為當滑鼠離開時，事件會冒泡到最外層的document，因此直接社在document上。

相關文章