2. 程式人生 > >實現具有吸附性的拖拽效果-高階拖拽（相容）

實現具有吸附性的拖拽效果-高階拖拽（相容）

阿新 • • 發佈：2018-11-24

1.body裡面有Div和一段文字

<body>
	這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字
	<div id=“div1”>盒子裡面的文字盒子裡面的文字盒子裡面的文字盒子裡面的文字盒子裡面的文字</div>
	這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字
</body>

2.給Div設定一些css樣式

<style type="text/css">
	div{
		top:0;left: 0;
		width: 100px;height: 100px;
		position
 
: absolute;
		 background: red;
		padding: 1px; 
		line-height: 20px;
		word-break: break-all; 
		word-wrap:break-word;
		cursor: pointer; 
		border-radius: 10px;
		 box-shadow: 1px 1px 1px #ccc;
	 }
</style>

3.給Div新增js效果（重要）

<script>
	window.onload =function(){
		var oDiv =document.getElementById
 
('div1');
		
		oDiv.onmousedown =function(ev){
			var oEvent =ev||event;
			var disX =oEvent.clientX -oDiv.offsetLeft;
			var disY =oEvent.clientY -oDiv.offsetTop;
			
			if(oDiv.setCapture){
				oDiv.onmousemove =mouseMove;
				oDiv.onmouseup =mouseUp;
				
				oDiv.setCapture();
			}else{
				document.
 
onmousemove =mouseMove;
				document.onmouseup =mouseUp;
			}
			
			function mouseMove(ev){
				var oEvent =ev||event;
				var l =oEvent.clientX -disX;
				var t =oEvent.clientY -disY;
				var rightLine = document.documentElement.clientWidth-oDiv.offsetWidth;
				var bottomLine = document.documentElement.clientHeight-oDiv.offsetHeight;
				
				if(l <50){
					l =0;
				}else if(l >rightLine-50){
					l = rightLine;
				}
				if(t <50){
					t =0;
				}else if(t >bottomLine-50){
					t =bottomLine;
				}
				
				
				oDiv.style.cursor ="move";
				oDiv.style.left =l+'px';
				oDiv.style.top =t+'px';
			};
			
			function mouseUp(){
				this.onmousemove =null;
				this.onmouseup =null;
				
				oDiv.style.cursor ="pointer";
				if(oDiv.releaseCapture){
					oDiv.releaseCapture();
				}
			};
		
		    return false;
		};
		
		
		
		
	}
</script>

相關推薦

實現具有吸附性的拖拽效果-高階拖拽（相容）

1.body裡面有Div和一段文字 <body> 這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字 <div id=“div1”>盒子裡面的文字盒子裡面的文字盒子裡面的文字盒子裡面的文字盒子裡面的文字</div>

IE8實現拖拽效果的優化版（針對於我之前的一篇文章的內容）

在上一篇文章中，講述的ie8實現拖拽效果的內容，對於在DIV塊中的資料的改變是有很大問題的， 比如說，如果你要動態刪除其中的一個DIV塊，在刪除之後，繼續其他塊的情況下，就會發生資料的不匹配（意思就是：之前刪除的資料再次出現並且，擠掉原來的資料）這種情況， 其實出現這個情況

Java高階架構師（一）第12節：Service的實現以及模組化

BaseService.java package com.sishuok.architecture1.common.service; import java.util.List; import com.sishuok.architecture1.common.dao.BaseDAO; import

仿製慕課網app實現鬥魚，全民k歌視訊引導頁（ViewVideoViewPaper）炫酷效果

在幾個月前，我第一次玩全民k歌，下載完app，它彈出來的引導頁吸引了我，不像以前的引導頁一樣千篇一律，而是用了視訊的方式，用一種動態的方式來實現。在今天，我突然又想起了這個效果，就抽出了一點時間在網上也借鑑了一些人的想法自己寫了一下這個炫酷的視訊引導頁。 現在我們先來看一下

用 Unity 和 HTC Vive 實現高階 VR 機制（1）

VR 從來沒有這樣時髦過，但是遊戲不是那麼好做的。為了提供真實的沉浸式體驗，遊戲內部機制和物理必須讓人覺得非常、非常的真實，尤其當你在和遊戲中的物件進行互動的時候。 在本教程的第一部分，你會學習如何建立一個可擴充套件的互動系統，並在系統中實現多種抓取虛擬物

用 Unity 和 HTC Vive 實現高階 VR 機制（2）

介紹 在第一部分教程中，我們學習李如何建立互動系統以及用它來抓取、握持和扔出東西。 在第二部分中，你將學習： 製作一副功能完備的弓和箭 建立一個虛擬揹包 本教程針對高階讀者，它會跳過許多細節，比如新增元件、建立新 GameObjecdt、指令碼等

CSS3動畫實現高亮光弧效果,文字和圖片（一閃而過）

前言   好久沒有寫部落格啦，高亮文字和圖片一閃而過的特效，用CSS3來寫  先看文字吧， 就上程式碼了 .shadow { /* 背景顏色線性漸變 */ /* 老式寫法 */ /* linear為線性漸變，也可以用下面的那種寫法。left top，right t

Android使用GPUImage實現濾鏡效果精煉詳解（一）

一、前期基礎知識詳解 “濾鏡通常用於相機鏡頭作為調色、新增效果之用。如UV鏡、偏振鏡、星光鏡、各種色彩濾光片。濾鏡也是繪圖軟體中用於製造特殊效果的工具統稱，以Photoshop為例，它擁有風格化、畫筆描邊、模糊、扭曲、銳化、視訊、素描、紋理、畫素化、渲染、藝術效果、其他

SQL Server 查詢性能優化——創建索引原則（二）

技術分享 dex ble 銷售 得到 with 9.png ron 條件 三：索引的建立原則 　　一般來說，建立索引要看數據使用的場景，換句話來說哪些訪問數據的SQL語句是常用的，而這些語句是否因為缺少索引（也有可能是索引過多）變的效率低下。但絕不是所有的SQL語句都要建

用WebService實現對數據庫進行操作(添加+刪除+修改)（轉）

add exe dispose eth 連接 字段 article log conn 轉自：http://blog.csdn.net/beyondqd/article/details/6703169 表為User，字段有 編號： int id，用戶名：string User

C#高性能大容量SOCKET並發（八）：通訊協議

pad 英文 透明 優勢 sock ase sha dev lac 協議種類 開發Socket程序有兩種協議類型，一種是用文本描述的，類似HTTP協議，定義字符集，好處是兼容性和調試方便，缺點是解析文本會損耗一些性能；一種是用Code加結構體，定義字節順序，好處是性能高，

三種比較好玩的黑客效果JS代碼（摘取）

技術分享 包含 tag 計算表達式 htm 隨機生成 dex java ava <html> <head> <title>The Matrix</title> <script src="http://

一起寫框架-Ioc內核容器的實現-基礎功能-ComponentScan支持組件註解限制（七）

name oid true int declare 修改 tac .cn 測試結果 實現功能 以上的代碼我們發現。我們都是將@ComponentScan掃描的路徑下的所有類都加載到容器中的。 而實際需求，我們並不希望所有的類都創建對象，而是加了組件註解@Controller

[深度學習]實現一個博弈型的AI，從五子棋開始（1）

com class svm 顏色 display 深度 images += have 好久沒有寫過博客了，多久，大概8年？？？最近重新把寫作這事兒撿起來……最近在折騰AI，寫個AI相關的給團隊的小夥伴們看吧。 搞了這麽多年的機器學習，從分

MySQL性能分析及explain的使用（轉）

行鎖 原則 註意 文檔 lac ref mys con targe 1、使用explain語句去查看分析結果，如 explain select * from test1 where id=1; 會出現： id selecttype table typ

開源性能測試工具JMeter快速入門（一）

正則表達 特殊 返回 預編譯 提取 檢查 blog 1.4 組織 目錄一、JMeter簡介二、JMeter功能介紹三、JMeter腳本四、關於JMeter小提示一、JMeter簡介1.定義JMeter是Apache組織開發的基於Java的壓力測試工具。用於對軟件做壓力測試，

開源性能測試工具JMeter快速入門（二）

代碼 取模 .bat -h 斷言 調度 測試 格式 needed 目錄一、JMeter簡介二、JMeter功能介紹三、JMeter腳本四、關於JMeter小提示三、JMeter腳本1.測試計劃測試計劃是JMeter進行測試的起點 ，是其他JMeter測試元件的容器，每個測試

Scala語言之高階函數（4）

ron 個數 處理 組合 元素 二維 spa toolbar 理解 ==> 常用函數講解 ---> map 作用於列表中的每一個元素// 定義一個列表 val list= List(1,2,3,4,5,6,7,8,9) // list 列表

使用Centos下的iptables實現實驗室按教室、按時間進行上網控制（二）

上網控制 Linux防火墻 IPTABLES 高校運維 1.input鏈策略。input文件; #loopbackiptables -A INPUT -i lo -j ACCEPT #DOS防護iptables -A INPUT -i eth0 -p tcp --syn -m connlim

*使用Centos下的iptables實現實驗室按教室、按時間進行上網控制（三）

Linux 高校運維 iptables 上網時間控制 本章介紹如何使用time模塊對教室上網進行控制，以206教室為例，206教室網絡屬於Vlan206，net：10.1.26.0/24，gateway:10.1.26.254 206文件； #ALL#iptables -A FORWARD