2. 程式人生 > >可拖動的懸浮div，相容手指觸控和滑鼠點選

可拖動的懸浮div，相容手指觸控和滑鼠點選

阿新 • • 發佈：2019-01-28
var flag = false;//滑鼠|手指是否按下的標記 var cur = {//記錄滑鼠|手指按下時的座標 x:0, y:0 } var nx,ny,dx,dy,x,y ; //按下時的函式 function down(){ flag = true;//確認滑鼠|手指按下 var touch ; if(event.touches){ touch = event.touches[0];//多個滑鼠|手指事件取第一個 }else { touch = event; } cur.x = touch.clientX; //記錄滑鼠|手指當前的x座標
cur.y = touch.clientY;//記錄滑鼠|手指當前的y座標 dx = div2.offsetLeft;//記錄div當時的左偏移量 dy = div2.offsetTop;//記錄div的上偏移量 } function move(){ if(flag){//如果是滑鼠|手指按下則繼續執行 var touch ; if(event.touches){ touch = event.touches[0]; }else { touch = event; } nx = touch.clientX - cur.x;//記錄在滑鼠|手指x軸移動的資料
ny = touch.clientY - cur.y;//記錄在滑鼠|手指y軸移動的資料 x = dx+nx; //div在x軸的偏移量加上滑鼠|手指在x軸移動的距離 y = dy+ny; //div在y軸的偏移量加上滑鼠|手指在y軸移動的距離 div2.style.left = x+"px"; div2.style.top = y +"px"; //阻止頁面的滑動預設事件 document.addEventListener("touchmove"
,function(){ event.preventDefault(); },false); } } //滑鼠|手指釋放時候的函式 function end(){ flag = false; //滑鼠|手指釋放 } var div2 = document.getElementById("div2"); div2.addEventListener("mousedown",function(){ down(); },false); div2.addEventListener("touchstart",function(){ down(); },false) div2.addEventListener("mousemove",function(){ move(); },false); div2.addEventListener("touchmove",function(){ move(); },false) document.body.addEventListener("mouseup",function(){ end(); },false); div2.addEventListener("touchend",function(){ end(); },false);

相關推薦

可拖動的懸浮div，相容手指觸控和滑鼠點選

var flag = false;//滑鼠|手指是否按下的標記 var cur = {//記錄滑鼠|手指按下時的座標 x:0, y:0 } var nx,ny,dx,dy,x,y ; //按下時的函式 function down

可拖動的div

efault spa fault nbsp DC als body htm title ## <!DOCTYPE html> <html> <head runat="server"> <tit

Android可拖動懸浮按鈕

最近專案需要使用可拖拽的懸浮按鈕，所以實現了一個小demo 因為是模擬器的緣故，拖動的時候看起來有點卡頓，如果在真機上執行時非常完美的 技術要突破的難點有下面幾個： 1 如何懸浮？ 使用相對佈局或者幀佈局，按鈕放在最外層即可 2 如何拖動？ 對按鈕進行移動監聽

js簡單的可拖動的div

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <me

JS-實現可拖動的div；實時監聽input標籤value變化

實現可拖動的div var mover = new Mover(document.getElementById("header")); // js封裝：實現可拖動的div. function Mover(title) { this.obj = title; this.st

使用easydrag實現可拖動的DIV彈出框

最近在工作中遇到了jquery的easydrag外掛，我有一種相見恨晚的趕腳！easydrag極大的方法我們實現div彈框這個功能，使我愛不釋手！在沒遇到easydrag外掛之前，想實現一個彈出框並不是

javascript實現可拖動DIV層

百度 -i osi sil weight 拖動 oev solid col 原文發布時間為：2009-05-04 —— 來源於本人的百度文章 [由搬家工具導入]注意以下红色部&

讓DIV可編輯、可拖動

val 設置 http spa led table edit .net ocl 版權聲明：本文為博主原創文章，未經博主允許不得轉載。 1、可編輯： <div id="move" contentEditable="true">可編輯</div>

彈出可拖動DIV層提示視窗

實現點選彈出可拖動的DIV層 1、程式碼： <!DOCTYPE html>              <html>              <head>              <meta http-equiv="Con

可拖動的懸浮球(增加螢幕邊界判斷)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content=

手指拖動小球移動，點選空白處，小球不跟著移動

package com.example.xxx.circle; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import and

Android 可拖動的懸浮按鈕

這是控制元件的主程式碼，在你的專案裡面，新建一個同名的類，把程式碼直接複製進去就能用了。另外，這個類裡面引用了工具類的一些程式碼。工具類在這個主類的原始碼下面也有貼出，直接把工具類的相關程式碼，複製到你自己的工具類裡就行了，有問題可以加我QQ諮詢：326257241。 /** * @C

js按住滑鼠左鍵選中網格元素，被選中的網格位置上填充可輸入內容，插入圖片等的容器。並且網格上的容器，可拖動、改變尺寸、但互相之間不可重疊（如果重疊回到上一次的狀態）。

js/jquery 按住滑鼠左鍵圈選網格，圈選網格顏色變深， 圈選區域不可重疊，被選中的網格位置上填充可輸入內容，插入圖片、媒體，表格、echarts圖表等的容器。並且網格上的容器可拖動，可改變尺寸，但不可重疊（如果重疊回到上一次的狀態）， 上述要求為本次實際開發專案（vu

可拖動 全域性懸浮框

Android手機內的全域性懸浮框，可拖動。而且不需要系統許可權！下面的是主要程式碼： package cn.net.owen.floatview; import android.app.Service; import android.content.I

WindowManager實現懸浮可拖動效果

現在360手機衛士有個流量統計的效果，開啟流量統計後，在桌面上會出現一個顯示流量的窗體，在任何介面都可以自由拖動。 模仿這個功能，做了一個統計手機訊號強度的Demo, 介面效果如下: 從上面的截圖可

android筆記之可拖動的不要許可權的懸浮框

<span style="font-size:24px;color:#ff6666;">呼叫的話直接呼叫begin方法就可以了，自己的筆記沒有太多解釋，程式碼很簡單的</span>package com.tianxia.administrator.c

Android新增可拖動、點選的懸浮視窗

原文地址：http://mobile.9sssd.com/android/art/1288，貌似這個地址也不是原創不過我是看的這個。。就這個吧。。。這個例子蠻不錯，簡單易懂，註釋也很全，只是執行之後發現有個小bug，往左上角拖動的時候會執行點選事件，造成的原因也很簡單，就是

Android實現可拖動的懸浮按鈕控制元件

有時候，我們需要一個可移動的選單，Android本身並沒有這樣的控制元件，小弟不才，最近研究了下，並參考了網上的一些資料，自己動手封裝了個，因為是第一個版本，可能會有一些bug，歡迎留言指導。我們先簡單來說一下原理： 隨著我們的手勢移動，控制元件就隨著

Android 可拖動可點選懸浮窗

Android 懸浮窗在5.0以上，特別是小米手機，魅族手機，就算給到了<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"> 2 </uses-permission&

android自定義可拖動的懸浮按鈕

在頁面上隨意拖動的按鈕public class MoveScaleRotateView extends RelativeLayout { private Context mContext; //預設的觸控點ID private static fina