滑鼠拖曳改變DIV的實例詳解
1.初次實作
1.1 html程式碼
<html xmlns="www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>div change width by drag</title><script src="../jQuery/jquery-1.8.3.min.js?1.1.11" type="text/javascript"></script></head><body><h1>div change width by drag</h1><div id="pos" style="color:red"></div><div id="myDiv" style="border:2px solid red;width:300px;height:50px;margin-left: 100px;margin-top: 20px"></div></body></html>
1.2 js程式碼
var eleLeft = $('#myDiv').offset().left;var isMouseDown = false;var borderLen = 4; //左右边框
$('#myDiv').bind({
mousedown:function(e){var ele = $(this);var rightPos = eleLeft + ele.width() + borderLen;if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
isMouseDown = true;
}
},
mousemove:function(e){var ele = $(this);var rightPos = eleLeft + ele.width() + borderLen;
$('#pos').text("x:"+e.pageX + " eleLeft:"+eleLeft+" rightPos:"+rightPos);if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
ele.css('cursor','e-resize');
}else{if(!isMouseDown){
ele.css('cursor','auto');
}
}if(isMouseDown){
ele.width((e.pageX-eleLeft-borderLen)+'px'); //新鼠标位置-div距左-borderLen }
},
mouseup:function(e){
isMouseDown = false;
}
});1.3 結果
只能往左拖曳使div寬度變小，往右拖曳也沒用！原因往右拖曳滑鼠mousemove事件無法被div捕獲了。拖曳時也很難停下來！所以得改進。
2.再改進
$('#myDiv' ele = $( rightPos = eleLeft + ele.width() +(rightPos-5 <= e.pageX && e.pageX <== 'body' ele = $('#myDiv' rightPos = eleLeft + ele.width() +'#pos').text("x:"+e.pageX + " eleLeft:"+eleLeft+" rightPos:"+(rightPos-5 <= e.pageX && e.pageX <='cursor','e-resize'(!'cursor','auto'-eleLeft-borderLen)+'px'); =這次解決了上述問題，可以往右拖，並且隨時可以停下來了。到這裡就完成了嗎？ NO!
當我引入一個其他div，並且阻止mouseup事件冒泡情況怎麼樣？答案是，拖曳到這個其它div上放開滑鼠後無法停止下來！
<div id="otherDiv" style="border: 2px solid blue;width: 200px;height: 200px;margin-left: 400px"></div>
$('#otherDiv').mouseup(function(e){//e.preventDefault(); //阻止默认行为e.stopPropagation(); //阻止事件冒泡(导致body捕获不到mouseup事件)});
3.完美解決
拖曳停止可能受到其它元素的幹擾，怎麼解決？想到一些彈出層點擊其它其它地方隱藏的功能，讓我想到了，加一個遮罩層，讓mouseup事件總是可以響應，不就搞定了嘛！
$('#myDiv').bind({
mousedown:function(e){var ele = $(this);var rightPos = eleLeft + ele.width() + borderLen;if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
isMouseDown = true;//创建遮罩层，防止mouseup事件被其它元素阻止冒泡，导致mouseup事件无法被body捕获，导致拖动不能停止var bodyWidth = $('body').width();var bodyHeight = $('body').height();
$('body').append('<div id="mask" style="opacity:0.2;top:0px;left:0px;background-color:green;position:absolute;z-index:9999;width:'+bodyWidth+'px;height:'+bodyHeight+'px;"></div>');
}
}
});
$('body').bind({
mousemove:function(e){var ele = $('#myDiv');var rightPos = eleLeft + ele.width() + borderLen;
$('#pos').text("x:"+e.pageX + " eleLeft:"+eleLeft+" rightPos:"+rightPos);if(rightPos-5 <= e.pageX && e.pageX <= rightPos){
ele.css('cursor','e-resize');
}else{if(!isMouseDown){
ele.css('cursor','auto');
}
}if(isMouseDown){
ele.width((e.pageX-eleLeft-borderLen)+'px');
}
},
mouseup:function(e){
isMouseDown = false;
$('#mask').remove();
}
});
$('#otherDiv').mouseup(function(e){//e.preventDefault(); //阻止默认行为e.stopPropagation(); //阻止事件冒泡(导致body捕获不到mouseup事件)});
4.完整程式碼與最終效果
div change width by drag div change width by drag
<div id="otherDiv" style="border: 2px solid blue;width: 200px;height: 200px;margin-left: 400px"></div>
以上是滑鼠拖曳改變DIV的實例詳解的詳細內容。更多資訊請關注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)
Edge瀏覽器怎麼將網頁用捷徑傳送到桌面？
Mar 14, 2024 pm 05:22 PM
Edge瀏覽器怎麼將網頁用捷徑傳送到桌面？我們很多用戶為了方便直接打開訪問頁面，想要將經常使用的網頁以快捷方式的形式顯示在桌面，但是不知道應該如何操作，針對這個問題，本期小編就來和廣大用戶們分享解決方法，一起來看看今日軟體教學分享的內容。 Edge瀏覽器將網頁傳送到桌面捷徑方法： 1、開啟軟體，點選頁面中的「...」按鈕。 2、在下拉式選單選項中選擇「應用」中的「將此網站作為應用程式安裝」。 3、最後在彈出的視窗中將其
網頁圖片載入不出來怎麼辦？ 6種解決辦法
Mar 15, 2024 am 10:30 AM
有網友發現打開瀏覽器網頁，網頁上的圖片遲遲加載不出來，是怎麼回事？檢查過網路是正常的，那是哪裡出現了問題呢？下面小編就來跟大家介紹一下網頁圖片載入不出來的六種解決方法。網頁圖片載入不出來： 1、網速問題網頁顯示不出圖片有可能是因為電腦的網路速度比較慢，電腦中開啟的軟體比較多， 而我們造訪的圖片比較大，這就可能因為載入逾時，導致圖片顯示不出來， 可以將比較佔網速的軟體將關掉，可以去任務管理器查看一下。 2、造訪人數過多 網頁顯示不出圖片還有可能是因為我們造訪的網頁，在同時段造訪的
網頁自動刷新設定方法
Oct 26, 2023 am 10:52 AM
設定網頁的自動刷新可以使用HTML的「meta」標籤、JavaScript的「setTimeout」函數、「setInterval」函數或HTTP的」Refresh「頭。詳細介紹：1、使用HTML的「meta」標籤，在HTML文件的「<head>」標籤中，可以使用「meta」標籤來設定網頁的自動刷新；2、JavaScript的「setTimeout」函數等等。
網路連線正常但瀏覽器無法存取網頁可能原因
Feb 19, 2024 pm 03:45 PM
瀏覽器打不開網頁但是網路正常，可能的原因是多種多樣的。當問題出現時，我們需要逐步排查，才能確定具體的原因並解決問題。首先，確定網頁打不開的現像是侷限於某個特定的瀏覽器或所有瀏覽器都無法開啟網頁。如果只有一個瀏覽器無法開啟網頁，可以嘗試使用其他瀏覽器，如Google瀏覽器、火狐瀏覽器等進行測試。如果其他瀏覽器能夠正常開啟網頁，那麼問題很可能出在該特定瀏覽器上，可能
網頁打不開怎麼解決
Feb 21, 2024 am 10:24 AM
網頁打不開怎麼解決隨著網路的快速發展，人們越來越依賴網路來獲取資訊、進行交流和娛樂。然而，有時我們會遇到網頁打不開的問題，這給我們帶來了很多困擾。本文將為大家介紹一些常見的方法，幫助解決網頁打不開的問題。首先，我們要確定是因為什麼原因導致網頁打不開。可能的原因包括網頁問題、伺服器問題、瀏覽器設定問題等。以下是一些解決方法：檢查網路連線：首先，我們需要
美團外送商家版起送價怎麼改
Mar 27, 2024 pm 07:20 PM
在美團外送商家版的營運過程中，起送價的設定是至關重要的環節。合理的起送價不僅能幫助商家控製成本，還能在一定程度上提升訂單金額，進而增加整體收益。然而，許多商家對於如何修改起送價並不十分了解。那麼在下文中本站小編就將為各位商家們帶來詳細的起送價設定攻略，想要了解的話就快來下文中一探究竟吧！在美團外帶商家中心，透過登入後進入店鋪設置，然後選擇門市管理，在門市管理頁面頂部的切換導航中，選中配送信息，接著點擊新增配送區域即可完成操作。在您新增地點後，系統將自動顯示相應的配送費用。完成訂單後，您將獲
php怎麼在網頁打開
Mar 22, 2024 pm 03:20 PM
在網頁中執行 PHP 程式碼需要確保 Web 伺服器支援並已正確配置 PHP。可以透過三種方式開啟 PHP： * **伺服器環境：**將 PHP 檔案放置在伺服器根目錄並透過瀏覽器存取。 * **整合開發環境：**將 PHP 檔案放置在指定 Web 根目錄並透過瀏覽器存取。 * **遠端伺服器：**透過伺服器提供的 URL 位址存取託管在遠端伺服器上的 PHP 檔案。
Discuz編輯器：強大的網頁編輯工具
Mar 09, 2024 pm 06:06 PM
Discuz編輯器：強大的網頁編輯工具，需要具體程式碼範例隨著網路的發展，網站建立和內容編輯變得越來越重要。作為常見的網頁編輯工具，Discuz編輯器在網站建置中扮演著重要的角色。它不僅提供了豐富的功能和工具，還能夠幫助使用者更方便地編輯和發佈內容。在本文中，我們將介紹Discuz編輯器的特點和使用方法，並提供一些具體的程式碼範例，來幫助讀者更好地了解和使用
