简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > js教程 > 主體

原生js如何實作拖曳事件（程式碼）

不言
發布： 2018-08-15 17:33:50
原創
1536 人瀏覽過

這篇文章帶給大家的內容是關於原生js如何實現拖曳事件（程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box{
			width:200px;
			height:200px;
			background-color: red;
			position: absolute;
			left:0;
			top:0;
		}
	</style>
</head>
<body>
	<p class=&#39;box&#39;></p>
	<script>
		var box = document.querySelector(&#39;.box&#39;);
		box.onmousedown = function(e){
			var event = e || window.event;
			var target = event.target || event.srcElement;
			var disX = event.clientX - target.offsetLeft;
			var disY = event.clientY - target.offsetTop;
			document.onmousemove = function(event){
				// 注意：这里要有自己的事件对象
				target.style.left = event.clientX - disX + &#39;px&#39;;
				target.style.top = event.clientY - disY + &#39;px&#39;;
				document.onmouseup = function(){
					document.onmousedown = null;
					document.onmousemove = null;
				}
			}
		}
	</script>
	
</body>
</html>
登入後複製

相關推薦：

js控制檔拖曳並取得拖曳內容實作程式碼

js簡單的表拖曳_javascript技巧

 原生JS實作拖曳圖片效果_javascript技巧

以上是原生js如何實作拖曳事件（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
拖曳
來源：php.cn
上一篇：js事件委託是什麼？ javascript事件委託的介紹 下一篇：js時間相互轉換：時間戳轉為時間字串（程式碼）
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
有沒有辦法讓textarea在調整大小時不顯示CSS變換？ 當我要在懸停時設定<textarea>的背景轉換時，它成功了。但是，當我嘗試調整它的大小時，transition時間仍然有效。這是我的程式碼，你可以拖曳<text...
來自於 2024-04-03 17:02:11
0
1
245
在 Angular 中建立圓形 SVG 溫度拖曳器？ 這是我嘗試在Angular中創建的圓形拇指拖曳器的靜態演示。它使用rinkle-dashoffset="-260"設定將拇指/拖曳器定位在靠近拇指後面的圓形路徑...
來自於 2024-04-03 09:33:29
0
1
376
可拖曳 Framer Motion 元件的保留位置 我正在創建一個小部件儀表板，您可以在其中移動小部件，我的目標是在拖曳小部件後保留它們的位置，以便在將來的會話中將它們加載到完全相同的位置。這裡有一個codesandbox，它說明了...
來自於 2024-03-31 22:29:49
0
1
313
將文字欄位新增至使用者上傳的 PDF 中的拖放方法 請有人向我解釋如何像adobesign一樣將文字欄位拖放到上傳的PDF中。我正在嘗試使用DocuSignAPI製作React應用程序，我需要在PDF中新增欄位。
來自於 2024-03-31 09:46:21
0
1
276
在狀態中重新排序數組 我使用zustand建立一個帶有待辦事項數組的全域狀態，我有新增、刪除和切換每個待辦事項完成/撤銷的功能。我還使用DndKit拖放每個ToDo元件並在全域上下文中對它們重新排序，為...
來自於 2024-03-30 14:44:42
0
1
278
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！