簡單拖拽事件實現
阿新 • • 發佈:2018-11-10
var div = document.getElementById("div");//通過ID找到你的目標元素
div.ondrag = function(evt){
this.style.left = evt.detail.changedTouches[0].clientX - this.offsetWidth*0.5 + "px";
this.style.top = evt.detail.changedTouches[0].clientY - this.offsetHeight*0.5 + "px";
}
主要應用到的還是ondrag事件
當然你也可以用:
var drage = false; if("ontouchstart" in window){ startEvt = "touchstart"; moveEvt = "touchmove"; endEvt = "touchend"; }else{ startEvt = "mousedown"; moveEvt = "mousemove"; endEvt = "mouseup"; } div.addEventListener(startEvt,()=>{ //點選事件開始 drage = true; div.addEventListener(moveEvt,function(){ if(drage){ //拖動事件開始你的操作 } }) div.addEventListener(endEvt,function(){ //拖動結束時你的操作 drage = false; }) })
不過你得自己寫一段移動端適配的拖拽事件適配:
var drage = false; if("ontouchstart" in window){ startEvt = "touchstart"; moveEvt = "touchmove"; endEvt = "touchend"; }else{ startEvt = "mousedown"; moveEvt = "mousemove"; endEvt = "mouseup"; } div.addEventListener(startEvt,function(evt){ //點選事件開始 drage = true; var x; var y; div.addEventListener(moveEvt,function(evt){ if(drage == true){//如果為true //拖動事件開始你的操作 //例如下面: if("ontouchstart" in window){ x = evt.touches[0].clientX; y = evt.touches[0].clientY; }else{ x = evt.clientX; y = evt.clienttY; } } }) div.addEventListener(endEvt,function(evt){ //拖動結束時你的操作 drage = false;//判定是否進行拖拽事件 }) })
不過ondrag事件更加方便,程式碼量也非常少,並且相容移動端,測試iphone沒有問題。