storage事件的拖拽應用

2021-09-29 06:39:31 字數 1246 閱讀 9098

實現在兩個頁面中的方塊拖拽其中一塊另乙個方塊的移動

乙個方塊移動產生的實時的定位值放到本地儲存中,另乙個方塊獲取本地儲存的值,作為自己的定位

html1中:

var obox=document.queryselector(".box");

//初始值 紅色的最後存的位置

var pos=json.parse(localstorage.getitem("qwe"));

obox.style.left=pos.x+"px";

obox.style.top=pos.y+"px";

//localstorage發生改變觸發 讀取其中的localstorage發生改變

onstorage=function(eve)

// 每次運動的時候,訪問位置 跟隨著一起運動

class drag

init()

}down()

document.οnmοuseup=function()

}move(e)

//物件轉為字元 存進去 只能存字元

//存的位置 localstorage裡面去

localstorage.setitem(「qwe」,json.stringify(pos));

}up()

}new drag();

html2 中:

var obox=document.queryselector(".box");

//初始值 紅色的最後存的位置

var pos=json.parse(localstorage.getitem("qwe"));

obox.style.left=pos.x+"px";

obox.style.top=pos.y+"px";

//localstorage發生改變觸發 讀取其中的localstorage發生改變

onstorage=function(eve)

class drag

init()

}down()

document.onmouseup=function()

}move(e)

//物件轉為字元 存進去 只能存字元

//存的位置 localstorage裡面去

localstorage.setitem("qwe",json.stringify(pos));

}up()

}new drag();

JS 拖拽事件

這裡寫的是乙個原生js實現拖拽的效果,首先 1 實現拖拽的三大事件,是要首先清楚的 onmousedown 滑鼠按下的時候 onmousemove 滑鼠移動的時候 onmouseup 滑鼠鬆開的時候 2 給目標元素加上onmousedown時間,記錄滑鼠按下的時候,滑鼠距離所在元素的位置 就是滑鼠距...

vue 拖拽事件

darg.vue position relative 定位 top 10px left 10px width 200px height 200px background 666 設定一下背景 data methods document.onmouseup e computed 當然,我們可以將它繫結...

js拖拽事件

doctype html utf 8 js拖拽事件 title page style head page div body html 這裡寫的是乙個原生js實現拖拽的效果,首先 實現拖拽的三大事件,是要首先清楚的 onmousedown 滑鼠按下的時候 onmousemove 滑鼠移動的時候 onm...