思路：
確定盒子的移動的方式
1、 定位的left top值可以讓盒子移動
2、直接margin 頂（在文件流中，不建議） 父元素的padding頂 （更加不建議）
使用left來實現 ，需要設定定位。全部用 相對定位(疊加計算) 絕對定位都能實現(相對是誰，如果**多，會很亂。)，
這裡我們使用 父相子絕（邊界相對定位，移動的盒子絕對定位）
確定是否有邊界
移動的盒子不能超過設定的邊界。
判斷邊界有很多方法。可以使用移動盒子的四個角到視口的距離判斷，也可以使用盒子能夠移動的left來進行判斷邊界。
這裡我們使用 可以移動的最大值來判斷。
橫向可以移動的最大 就是邊界寬 - 移動盒子的寬
縱向可以移動的最大top 就是邊界的高 - 移動盒子的高
思考都觸發了什麼事件。
盒子被拖動，首先需要 盒子被滑鼠 按下不抬起（onmousedown）， 然後是拖動(onmousemove)，滑鼠鬆開(onmouseup)
深度思考。 確保滑鼠在觸發滑鼠按下不抬起的點，移動到終點的時候，點還在盒子的上相同位置。這個盒子該怎麼樣繪製。
我們這裡使用的思路就是
盒子移動，需要知道滑鼠 「點」在** ，然後根據移動後的「點」再繪製盒子，這裡通過為盒子設定的left和top值，讓盒子移動，移動的left和top減去點在盒子上的距離。就可以保證點還在盒子的相同位置上。
我們可以盒子的四個角來做運算，我們這裡選擇使用 左上角來計算 left值和top值。
這個時候我們又有了兩種演算法，left 可以相對於 父元素的邊框，也可以根據上次移動的left 進行疊加。其實，這都是相對于父元素的邊框。（注意，我們的盒子現在是絕對定位。）來一張醜陋的圖。我們不用疊加。用簡單，不走坑的，相對於大盒子的left。
那麼此時， 需要小盒子左邊框的值到黑盒子，我們可以通過 左上角的點來算。
點在** 使用唯讀屬性 offsetx 和offsety 得到滑鼠的點在小盒子中的位置
小黑盒子 ： 點到視口的位置 clientx clienty 減去 點在小綠盒子的offsetx 和 offsety
再減去 大盒子 到視口的位置（pagex），大盒子到視口的位置可以選擇使用 getcomputedstyle(ie也不支援,我用的ie全指的是ie8,ie用的解析是currentstyle。可以做這麼乙個相容) 瀏覽器解析之後的樣式計算，也可以使用pagex,pagey 求得
這裡我們使用pagex和 pagey 來做圖。（page是事件物件，並且ie不支援。下一遍原生js封裝page函式，就可以呼叫page函式來實現,**我們暫時先用getcomputedstyle。想要相容的小夥伴可以解析樣式這裡做乙個相容）。
然後進去大盒子的邊框。（這裡我們使用clientleft得到左邊框）。然後就可以得到的 left 移動值， 相對於大黑盒子移動left。就可以達到相同的位置（展示）
所以移動的left值就為
left值 = 移動後「點」的視口的x座標 - 元素的偏移x座標（offsetx） - 父元素到頁面的距離(pagex) - 父元素的邊框(clientleft)。
1、 需要的事件 onmousedown、onmousemove、onmouseup
2、使用定位的left和top 來作為盒子移動。
3、邊界的判斷使用 可以移動的最大值
*
#box
#move
"box"
>
"move"
>
div>
div>
var box = document.
getelementbyid
('box');
var move = document.
getelementbyid
('move');
// 最大可以移動距離
var maxleft =
parsefloat
(getcomputedstyle
(box)
.width)
-parsefloat
(getcomputedstyle
(move)
.width)
;var maxtop =
parsefloat
(getcomputedstyle
(box)
.height)
-parsefloat
(getcomputedstyle
(move)
.height)
;// 獲得盒子到 距離 視口 的寬和高
var leftt =
getcomputedstyle
(box)
.marginleft;
// 得到的是px
var topp =
getcomputedstyle
(box)
.top;
move.
onmousedown
=function
(e)}
// 滑鼠抬起
document.
onmouseup
=function()
原生JS拖拽
想要讓整個元素移動需要三個事件 滑鼠按下 onmousedown 滑鼠移動 onmousemove 滑鼠抬起 onmouseup html 登入會員 關閉使用者名稱 登入密碼 登入會員 頁面效果如下 jsvar login document.queryselector login 獲取整個彈框的內容...
原生js實現拖拽盒子
盒子必須是絕對定位的盒子 滑鼠在盒子內部按下時獲得相對座標。事件物件在頁面的位置減去盒子距離body的距離 滑鼠移動時，使得盒子的位置發生變化 滑鼠鬆開時，不再拖動 移動事件失效 lang zh charset utf 8 name viewport content width device wid...
原生JS拖拽改變元素大小
js運動，js動畫，js拖拽。我們在之前了解過拖拽的原理，其實利用這個原理我們能夠實現很多效果。今天就來介紹一下，利用拖拽方法來改變元素的大小。這個效果其實非常常見，比如說我們可以將滑鼠放在瀏覽器的邊邊上，然後瀏覽器游標就會變成可以拖拽的樣子，我們可以往左或往右拖拽。我們來實現這個效果。原理 先看一...