アイコンの一定範囲内のドラッグ機能
4720 ワード
なぜこれを作りますか?
私たちはその浮遊ボタンや浮遊メニューを作る時、一定の範囲でドラッグ機能を実行させたいと思います.
ドラッグ機能の原理(移動端)
原理としては、ジェスチャーをモニターして画面にタッチするときに初期のタッチポイントの座標を記録し、移動時点の座標で、2つの座標を計算して、最後の点の座標を得ます.すなわちアイコンの位置が得られます.
コードの表示
私たちはその浮遊ボタンや浮遊メニューを作る時、一定の範囲でドラッグ機能を実行させたいと思います.
ドラッグ機能の原理(移動端)
原理としては、ジェスチャーをモニターして画面にタッチするときに初期のタッチポイントの座標を記録し、移動時点の座標で、2つの座標を計算して、最後の点の座標を得ます.すなわちアイコンの位置が得られます.
コードの表示
function moveanyway(){
//
var block = document.getElementById(" id");
if(block){
var oW,oH;
// touchstart
block.addEventListener("touchstart", function(e) {
var touches = e.touches[0];
oW = touches.clientX - block.offsetLeft;
oH = touches.clientY - block.offsetTop;
//
document.addEventListener("touchmove",defaultEvent,false);
},false);
block.addEventListener("touchmove", function(e) {
var touches = e.touches[0];
var oLeft = touches.clientX - oW;
var oTop = touches.clientY - oH;
if(oLeft < 10) {
oLeft = 10;
if (oTop <= 10) {
oTop = 10
}else if (oTop >= document.documentElement.clientHeight - block.offsetHeight -10) {
oTop = document.documentElement.clientHeight - block.offsetHeight -10;
}
}else if(oLeft > document.documentElement.clientWidth - block.offsetWidth -10) {
oLeft = (document.documentElement.clientWidth - block.offsetWidth - 10);
if (oTop <= 10) {
oTop = 10
}else if (oTop >= document.documentElement.clientHeight - block.offsetHeight -10) {
oTop = document.documentElement.clientHeight - block.offsetHeight -10;
}
}else if (oTop < 10) {
oTop = 10;
}else if (oTop > document.documentElement.clientHeight - block.offsetHeight -10) {
oTop = document.documentElement.clientHeight - block.offsetHeight -10;
}
block.style.left = oLeft + "px";
block.style.top = oTop + "px";
},false);
block.addEventListener("touchend",function() {
document.removeEventListener("touchmove",defaultEvent,false);
},false);
function defaultEvent(e) {
e.preventDefault();
}
}
}