實現在兩個頁面中的方塊拖拽其中一塊另乙個方塊的移動
乙個方塊移動產生的實時的定位值放到本地儲存中,另乙個方塊獲取本地儲存的值,作為自己的定位
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...