限制範圍拖曳，磁性吸附。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
margin: 0;
}
#wrap {
margin: 50px auto;
position: relative;
border: 1px solid #000;
width: 600px;
height: 500px;
}
#div {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background: red;
cursor: move;
}
</style>
</head>
<body>
<div id="wrap">
<div id="div">文字</div>
</div>
<script type="text/javascript">
(function(){
var div = document.querySelector('#div');
var maxX = div.offsetParent.clientWidth - div.offsetWidth;
var maxY = div.offsetParent.clientHeight - div.offsetHeight;
div.addEventListener('mousedown', function(e) {
e.preventDefault();
var start = {x: e.clientX,y: e.clientY};
var elOffset = {x: div.offsetLeft,y: div.offsetTop};
document.addEventListener('mousemove', move);
document.addEventListener('mouseup', end);
function move(e){
var dis = {x:e.clientX - start.x,y:e.clientY - start.y};
var x = dis.x + elOffset.x;
var y = dis.y + elOffset.y;
/* 左侧磁性吸附 */
x = x<0?0:(x>maxX?maxX:x);
y = y<0?0:(y>maxY?maxY:y);
console.log(x);
div.style.left = x + "px";
div.style.top = y + "px";
}
function end(e){
document.removeEventListener('mousemove', move);
document.removeEventListener('mouseup', end);
var dis = {x:e.clientX - start.x,y:e.clientY - start.y};
var x = dis.x + elOffset.x;
var y = dis.y + elOffset.y;
/* 左侧磁性吸附 */
x = x<100?0:(x>maxX?maxX:x);
/* 上边磁性吸附 */
y = y<100?0:(y>maxY?maxY:y);
console.log(x);
div.style.left = x + "px";
div.style.top = y + "px";
}
});
})();
</script>
</body>
</html>以上是限制範圍拖曳，磁性吸附。的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何解除影片號碼評論限制？影片號碼評論限制多少字數？
Mar 22, 2024 pm 02:11 PM
隨著影片號在社群媒體上的普及，越來越多的人開始利用影片號分享他們的日常生活、見解和故事。然而，一些用戶可能會遇到評論被限制的情況，這會讓他們感到困惑和不滿。一、如何解除影片號碼評論限制？若要解除視訊號碼評論限制，首先必須確保帳號已正常註冊並完成實名認證。影片號碼對評論設有要求，只有完成實名認證的帳號才能解除評論限制。如果帳號有異常情況，需要先解決這些問題才能解除評論限制。 2.遵守視頻號的社區規範。影片號碼對評論內容有一定的規範要求，如果評論涉及違規內容，會被限制發言。要解除評論限制，需要遵守視頻號碼的社區
使用java的StringBuilder.replace()函數取代指定範圍的字符
Jul 24, 2023 pm 06:12 PM
使用java的StringBuilder.replace()函數取代指定範圍的字元在Java中，StringBuilder類別提供了replace()方法，可以用來取代字串中指定範圍的字元。方法的語法如下：publicStringBuilderreplace(intstart,intend,Stringstr)上面的方法用來取代從索引star
C++ 函式重載的限制和注意事項有哪些？
Apr 13, 2024 pm 01:09 PM
函數重載的限制包括：參數類型和順序必須不同（相同參數個數時），不能使用預設參數區分重載。此外，模板函數和非模板函數不能重載，不同模板規範的模板函數可以重載。值得注意的是，過度使用函數重載會影響可讀性和偵錯，編譯器從最具體到最不具體的函數進行搜尋以解決衝突。
JavaScript 如何實現圖片的拖曳縮放同時限制在容器內？
Oct 20, 2023 pm 04:19 PM
JavaScript如何實現圖片的拖曳縮放同時限制在容器內？在Web開發中，經常會遇到需要對圖片進行拖曳和縮放的需求。這篇文章將介紹如何使用JavaScript實作圖片的拖曳縮放，並限制在容器內的操作。一、拖曳圖片要實現圖片的拖曳，我們可以使用滑鼠事件來追蹤滑鼠位置，並將圖片的位置隨之移動。下面是一個範例程式碼：//取得圖片元素varimage
如何設定CentOS系統以限制使用者對系統日誌的修改
Jul 05, 2023 pm 03:43 PM
如何設定CentOS系統以限制使用者對系統日誌的修改在CentOS系統中，系統日誌是非常重要的資訊來源，它記錄了系統的運作狀態、錯誤訊息、警告等。為了保護系統的穩定性和安全性，我們應該限制使用者對系統日誌的修改。本文將介紹如何設定CentOS系統，實現系統日誌的修改權限限制。一、建立使用者群組和使用者首先，我們需要建立一個專門負責管理系統日誌的使用者群組，以及一個用於管理
找出在範圍內不可被任何數整除的數字，使用C++
Sep 13, 2023 pm 09:21 PM
在本文中，我們將討論查找1到n（給定）之間的數字的問題，這些數字不能被2到10之間的任何數字整除。讓我們透過一些例子來理解這一點-Input:num=14Output:3Explanation:Therearethreenumbers,1,11,and13,whicharenotdivisible.Input:num=21Output:5Explanation:Therearefivenumbers1,11,13,17,and19,whicharen的解題方法簡單方法如果
使用jQuery實作輸入框僅允許輸入數字和小數點
Feb 26, 2024 am 11:21 AM
實作jQuery輸入框限制數字和小數點輸入在Web開發中，我們常常會遇到需求需要控制使用者在輸入框中輸入的內容，例如限制只能輸入數字和小數點。這種限制可以透過JavaScript和jQuery來實現。以下將介紹如何使用jQuery實作輸入框限制數字和小數點輸入的功能。一、HTML結構首先，我們需要在HTML中建立一個輸入框，程式碼如下：
Vue 中如何實現日期範圍選擇器？
Jun 25, 2023 am 08:41 AM
Vue中如何實現日期範圍選擇器？日期範圍選擇器是現代Web應用程式中常用到的一種介面元件。它允許使用者從一個日期範圍中選擇一個日期或一個時間段。對於需求為日期範圍選擇器的網頁應用程式開發，Vue.js是一個非常好的選擇。 Vue.js是一個用於建立使用者介面的漸進式JavaScript框架，它允許開發者使用元件化的方式來建立複雜的互動式介面
