滑鼠拖拽視窗效果（不允許拖出螢幕的可視區域）

阿新 • • 發佈：2019-01-13

這裡寫圖片描述

html樣式

  <body>
    <div id="div1"></div>
  </body>

css樣式

#div1 {
  width: 200px;
  height: 200px;
  background: #deb887;
  position: absolute;
}

JS樣式

window.onload = function (){
  var oDiv = document.getElementById('div1')
  var disX = 0;
  var disY = 0;

  oDiv.onmousedown = function 
 (ev){
    var oEvent = ev||event;

    disX =  oEvent.clientX - oDiv.offsetLeft;
    disY =  oEvent.clientY - oDiv.offsetTop;
    document.onmousemove = function (ev){
      var oEvent = ev||event;
      var l = oEvent.clientX - disX;
      var t = oEvent.clientY - disY;
      //此處的判斷是為了防止拖拽框被拖出螢幕可視區域 

      if(l<0) {
        l=0;
      }else if(l>document.documentElement.clientWidth - oDiv.offsetWidth){
        l = document.documentElement.clientWidth - oDiv.offsetWidth;
      }
      if(t<0) {
        t=0;
      }else if(t>document.documentElement.clientHeight- oDiv.offsetHeight){
        t = document.documentElement.clientHeight - oDiv.offsetHeight;
      }
      oDiv.style.left = l+ 'px' 
;
      oDiv.style.top  = t+ 'px';
    };
    //此處是為了防止在火狐瀏覽器下拖拽時會出現的兩次陰影的效果，此處程式碼可以禁用
    document.onmouseup = function (){
      document.onmousemove = null;
      document.onmouseup = null;
    }
  } 
}

其實原理就是實時計算區域框距離左右螢幕之間的距離，通過滑鼠的點選、拖動、移除事件來對區域框進行操作。在不同的條件下作出不同的判斷就可以了～

滑鼠拖拽視窗效果（不允許拖出螢幕的可視區域）

html樣式 <body> <div id="div1"></div> </body> css樣式 #div1 {

javascript--滑鼠拖拽視窗案例（滑鼠按下，在滑鼠移動過程中，盒子跟著一起移動，滑鼠鬆開，盒子停止移動）

介面如圖所示：要求：在“資訊註冊”欄，按下滑鼠，然後滑鼠在頁面移動，在滑鼠移動過程中，該視窗跟著滑鼠移動，當滑鼠鬆開的時候，視窗停止移動。點選“關閉”，該視窗隱藏。實現思路： 1.頁面結構分析：一個大盒子d-box來確定位置，裡面放一個小盒子drop（存放“註冊資訊（可以拖拽”文字和span標籤

Nativescript Android Keyboard Open Overlay OR Push View（鍵盤開啟覆蓋檢視或推出可視區域）

App_Resources/Android/src/main/AndroidManifest.xml <activity android:name="com.tns.NativeScriptActivity" android:windowSoftInputMode="adjus

圖片按需載入（判斷一個元素是否在可視區）思路

首先html程式碼結構如下 <body> <div id='container'>　　　　```　　　　　其他內容　　　　``` <div id='abc'> 是否在可視區 </div>

js擷取頁面內容、生成png（包括非可視區域）、下載到本地

喲，很有緣啊首先引入我提供的 js,(自己喜歡的也行。) <script type="text/javascript" charset="UTF-8" src="./js/printer/html2canvas.min.js"></scri

html中設定圖片不允許拖拽下載

1. 問題描述在瀏覽器中,常見的一種行為就是:選中-拖拽-新頁面開啟,例如百度搜索就是這樣.但是我現在不想讓別人在我的個人網頁上選中,也不想讓他人拖拽我的照片,要怎麼做呢? 2. 問題解決 <body ondragstart="window.event

拖拽的效果第一步設置可拖拽的屬性 draggable="true" 綁定drag 事件第二步設置放置位置觸發的事件 dragover 第三步設置放置之後觸發的事件 dragover 下面請看代碼：

存儲 targe 觸發 get tex 一個 func ons *** (function(){ /*-------節點--------*/ var myimg = document.getElementById(‘myimg‘); var dropBox

Java Set（不允許重複的集合）

HashSet: 防止重複使用HashSet的class必須implements Comparable(); ArrayList<class> classList=new ArrayList<class>

【Unity】實現“擠開”效果（不使用自帶物理引擎）【改】

今天發現被撞擊的小球移動有些生硬，所以改了一下被撞擊之後小球的移動方式。 using System.Collections; using System.Collections.Generic; using UnityEngine; public class Player : MonoB

【Unity】實現“擠開”效果（不使用自帶物理引擎）

using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class Player : MonoBehaviour { //

徹底搞懂拖拽——基於滑鼠事件的拖拽以及基於HTML5 API的拖拽完整實現

一、基於滑鼠事件的拖拽原理——onmousedown、onmousemove、onmouseup onmousedown 該事件會在滑鼠按鍵被按下時觸發支援該事件的HTML標籤： &l

利用jQuery UI為CMS網站實現拖拽佈局效果，秒殺table佈局

1 實現效果對於使用過CMS系統製作網站的人應該都清楚，製作網站過程有一個重要的步驟就是製作頁面佈局。目前，實現頁面佈局有兩種方式：table與div。這兩種方式各有其優劣之處。 Table：優勢：使用簡單，使用表格進行佈局順理成章，概念和效果圖

ajax視訊拖拽上傳（完善版）

在前輩的基礎上，進行了一些完善功能：可實現拖拽上傳視訊，有進度條顯示，MP4格式的視訊還可實現線上播放，進行了視訊上傳格式限制，格式不符合有提示不能上傳，大小可按情況自行新增限制最重要的是實現了大檔案斷點續傳的功能，更詳細功能可下載後體驗，就不一一贅述了首先，建

使用 vue 實現拖拽的簡單案例，不會超出可視區域

實現拖拽之前，先了解幾個小常識：這兩種獲取滑鼠座標的方法，區別在於基於的物件不同： pageX和pageY獲取的是滑鼠指標距離文件（HTML）的左上角距離，不會隨著滾動條滾動而改變； clientX和clientY獲取的是滑鼠指標距離可視視窗(不包括上面的位址列和滑動條)的距離

div/dom元素拖拽縮放外掛，純js實現拖拽縮放，不依賴jQuery~

產品需求，需要用到對div（dom）進行拖拽縮放操作，看到有好多外掛，要麼依賴jQuery，要麼檔案太大。封裝了一個外掛，不壓縮狀態下5KB。 html <!DOCTYPE html> <html lang="en"> <head> <

MIUI 拖動視差效果（阻尼效果/橡皮筋效果）

Parallax 專案地址：xiaoyanger0825/Parallax 簡介：MIUI 拖動視差效果（阻尼效果/橡皮筋效果）更多：作者提 Bug 官網標籤：

用瀏覽器實現win10選單的拖拽佈局效果

效果就是這麼個效果，放個沒有解釋的原始碼，有空再解釋~，可以掃左上角二維碼加我QQ交流 <template> <div class="drag"> <div class="column"> <div clas

JavaScript多張圖片放大鏡效果（不限定圖片尺寸，rem單位）

效果如下：可以展示圖片列表的放大鏡效果，圖片尺寸沒有要求會自動調整至水平垂直居中效果程式碼如下，除了圖片要替換一下，其它的可直接執行檢視效果，enlarge是圖片要放大檢視的倍數，注意：.bigBox的寬高與.tool的寬高比值要與enlarge保持一致，比如本例中這個比值是

js實現拖拽的解析（3）

<div style="width: 100px;height: 100px;background-color: #2df2ff;position: absolute;;left: 0; top:

利用原生js做出拖拽彈射效果

var Odiv = document.getElementById('demo'); Odiv.onmousedown = function (e) {//拖拽小物體 clearInterval(this.timer); var event = e || window.event;

滑鼠拖拽視窗效果（不允許拖出螢幕的可視區域）

相關推薦