Web組件流暢拖動效果

時間 2019-12-10

標籤 web 組件流暢拖動效果欄目 HTML 简体版

原文原文鏈接

　　拖動效果，能夠形象的幫助用戶處理一些問題，好比Windows刪除文件，只需將文件拖動至回收站便可。比起右鍵顯得更形象，我以爲更好玩一點^_^。固然，在其餘許多方面，其實也有用到拖動效果，只是他們不是那麼明顯，以致於咱們不容易覺察到。我是自娛自樂，寫一個Web MusicPlayer的時候開始對拖動有所構思，由於須要作個左右必定範圍內拖動的按鈕，來改變Music文件的播放進度。javascript

　　很少說了，下面咱們來進入本篇的正題。css

　　須要的組件：咱們先來理一下簡化後的拖動模型，只須要一個簡單的於body中一個普通的div。他的大小應該適中，這樣在看其相對鼠標運動時更加清晰。html

　　拖動觸發的事件：1.mousedown　　2.mousemove　　3.mouseupjava

　　拖動過程：鼠標左鍵在div上單擊觸發mousedown事件，在mousedown事件以後，鼠標開始拖動動做，觸發mousemove事件，注意，此時div應該跟隨鼠標在body上移動。這就牽扯到拖動的組件div的left（左支撐），以及top（上支撐）的該變量。（固然也能夠用right和bottom來反映，效果同樣）。要獲取鼠標移動狀況，在mousedown事件（設爲事件ed）以後，獲取鼠標屏幕位置（ed.clientX，ed.clientY）;鼠標移動後mousemove事件（設爲事件em）獲取鼠標位置（em.clientX，em.clientY）;則鼠標移動在X，Y方向的份量也是div將要移動的份量爲（em.clientX，em.clientY）-（ed.clientX，ed.clientY）=（em.clientX-ed.clientX,em.clientY-ed.clientY）;注意到得的值可能有負值狀況，這種狀況是不影響的。由於，若是咱們假設鼠標相對（ed.clientX，ed.clientY）向右下移動至（em.clientX，em.clientY），若其中出現負值，相應的加號接變成了減號，也就是移動方向爲假設方向的反方向，有實際意義，並不影響效果。如今，開始移動咱們惟一的div，（在實際運行中，二者移動幾乎是同步的，這裏分開來講，只是便於理解），由上文咱們知道div應該跟隨鼠標向假設的方向右下移動（em.clientX-ed.clientX,em.clientY-ed.clientY）；要在js中獲取組件div的left和top即初始位置（d.offsetLeft,d.offsetTop）(這裏d=document.getElementById('div');),則只需在mousemove事件觸發時，對div的left和top從新賦值便可跟隨鼠標移動，因此移動後的div位置爲（d.offsetLeft,d.offsetTop）+（em.clientX-ed.clientX,em.clientY-ed.clientY）=（d.offsetLeft+em.clientX-ed.clientX,d.offsetTop+em.clientY-ed.clientY）;這樣，咱們整個移動的過程就完成。spa

　　可是若是全部的事件監聽器所有放在待拖動div組件上，你會發現這個div很「脆弱」，慢慢拖動div中心徹底沒事，可是，當點擊div邊緣拖動，或者拖動速度較快時，你會發現咱們的辛辛苦苦作出的div玩去了，跑丟了。Q~Q。這是由於當mousemove觸發時，div跟隨鼠標移動，並不是是徹底同步的，他們之間是有很小的延時的。當咱們拖動速度很快的時候，鼠標跑出了div的「領域」，而咱們的mousedown是加在div上的，如今鼠標已經不在領域內，天然也就停下來了。鼠標和div分道揚鑣。要避免這個問題，也就是當鼠標在div外移動時，div依然艱難的保持與鼠標同步運動。即，mousedown依然放在div上，而mousemove放在咱們的最大的容器body上，這樣，當鼠標位於div外時，div依然追隨咱們我行我素的鼠標。爲了不當移速過快時忽然up鼠標左鍵狀況（這時，咱們鼠標即便沒有down左鍵，當鼠標進入div時，div依然追隨鼠標），mouseup也應該加在最大的容器body上，至此，我行我素的鼠標和至死不渝的div曲折的故事圓滿收尾。code

　　理清了思路下面就開始愉快的代碼時間了。（爲了粘貼方便，這裏就不分開css，js了）htm

看一下效果http://dearvee.ccaeo.com/blog/move.htmlblog

2017-03-08 17:13:01事件

<!DOCTYPE html>
<html>
<head>
    <title>move</title>
</head>

<style type="text/css"> .body_css{ width: 100%; height: 100%; position: absolute;
    } .div_css{ width: 100px; height: 100px; background-color: #0ff; position: absolute; left: 0px; top: 0px; color: #fff; user-select:none;
    }
</style>
<script type="text/javascript"> window.onload=function (){ var d = document.getElementById('div'); var b = document.getElementById('body'); d.addEventListener("mousedown", function(ed) { var flag=true; var dl=d.offsetLeft; var dt=d.offsetTop; b.addEventListener("mousemove",function(em){ if(flag){ d.style.left=dl+em.clientX-ed.clientX+"px"; d.style.top=dt+em.clientY-ed.clientY+"px"; } }); b.addEventListener("mouseup",function(){ flag=false; }); }); } </script>
<body id="body" class="body_css">
<div id="div" class="div_css">你甩不掉個人<br>Q_Q</div>
</body>
</html>

1. elementUI Table組件實現拖拽效果
2. View的拖動效果-ViewDragHelper
3. 拖動圖片效果
4. JS實現拖動效果
5. js實現拖動效果
6. draganddrop圖片拖動效果
7. 拖拽效果
8. js拖入拖出效果
9. Android 拖動組件
10. Shape流動效果
更多相關文章...
• SVG 模糊效果 - SVG 教程
• ASP AdRotator 組件 - ASP 教程
• SpringBoot中properties文件不能自動提示解決方法
• IntelliJ IDEA中SpringBoot properties文件不能自動提示問題解決

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。