通過監聽元件touch事件，來改變元件的left和top的樣式
1.首先，touchstart時，拿到元件初始狀態時的位置
2.touchmove，實時拿到元件的位置，並修改元件的left和top的值
3.如果要求吸附到旁邊，在touchend時，看最後元件的位置是偏向於左邊還是右邊，如果偏向於左邊，left設定為0，否則就是可移動的最大螢幕寬距
drag.js
var template = `
拖我移動看看
`vue.component('drag-comp', ,
nx: "", // 移動後，元件的x軸位置
ny: "",
dx: "", //初始狀態時，元件的位置
dy: "",}},
props: ,
methods: else
console.log(touch.clientx);
console.log(touch.clienty);
this.maxw = document.body.clientwidth - default_drag_comp.offsetwidth;
this.maxh = document.body.clientheight - default_drag_comp.offsetheight;
this.position.x = touch.clientx - default_drag_comp.offsetleft;
this.position.y = touch.clienty - default_drag_comp.offsettop;
this.dx = touch.clientx;
this.dy = touch.clienty;
},move(event) else
this.nx = touch.clientx - this.position.x;
this.ny = touch.clienty - this.position.y;
if (this.nx < 0) else if (this.nx > this.maxw)
if (this.ny < 0) else if (this.ny >= this.maxh)
default_drag_comp.style.left = this.nx + "px";
default_drag_comp.style.top = this.ny + "px";
//阻止頁面的滑動預設事件；如果碰到滑動問題，1.2 請注意是否獲取到 touchmove
document.addeventlistener(
"touchmove",
function () ,
false);}
},//滑鼠釋放時候的函式
end() else
}this.flags = false;}}
});
是
否
data: ,
methods: ,
mounted: function ()
});
html,
body,
height: 100%;
background-color: #ffffff;
} #default_drag_comp
#default_drag_comp span
.btn
.active
c 自定義可拖動變形控制項
public class 控制項移動變形類 usercontrol 控制項類 rectangle 傳遞控制項 傳遞控制項相對於本控制項的範圍 rectangle 本控制項 本控制項相對於自己的範圍 rectangle 調節點邊框 new rectangle 8 8個點相對於本控制項的範圍 recta...
QT 自定義邊框,可伸縮,延伸, 拖動
有時為了美觀,會自己製作邊框,這就意味著,你完成上述功能,要實現三個功能 1 窗體可自由 伸縮.可大可小.2 窗體可隨著滑鼠移動 3 自己實現標題欄 包含 最小化,最大化,關閉 那麼就按照上述的順序來講解 1 有時你會發現,當滑鼠放在邊框邊時 滑鼠會有變化,箭頭向上,向下,向左,向右,左上.思路 計...
可擴充套件的自定義table元件
vue class table with label class table th class th title v for item,index in viewdata key index width item.width li ul div class table tbody class bod...