jquery ui可以很簡單的實現元素的拖動,有時候,我們不能使用jquery ui,或者不想因為拖動就引入乙個ui庫,就可以自己實現元素的拖動,下面筆者把自己使用jquery + touchswipe元件實現拖動的關鍵點做簡要說明。
html拖動的關鍵點就是修改元素的位置,通過相對偏移來實現,而這個偏移可以通過jquery的offset方法來實現。
拖動還需要考慮滑鼠的移動事件,筆者採用touchswipe的swipestatus事件來實現(手機裝置友好的觸控庫)。
開始拖動時記錄開始位置:
這裡需要注意幾點:zoom = $(
"body").css("zoom");
z_idx = $(
event.target).css('z-index'),
drg_h = $(
event.target).outerheight(),
drg_w = $(
event.target).outerwidth(),
pos_y = $(
event.target).offset().top + drg_h - event.pagey/zoom,
pos_x = $(
event.target).offset().left + drg_w - event.pagex/zoom;
drgobj = event.target;
hitobj = null;
$(drgobj).css('z-index', 1000).addclass('dragging');
拖動過程中就是修改元件的偏移位置,需要注意的是,拖動過程中,滑鼠與拖動的元件會有速度上的差別,尤其是拖動速度比較快時,這個時候,前面儲存的拖動物件就可以起作用了。
在移動事件中,我們修改拖動物件的偏移位置,達到拖動的效果。if (drgobj == null) return;
$(drgobj).offset();
如果拖動的過程中需要檢測是否命中目標物件(拖動的目的),我們需要檢查當前位置是否落在目標物件的範圍內,使用如下**:
hitobject需要三個引數,x,y為頁面座標,dest為檢查的目標元件,比如,」.quan1」就是具有quan1的類物件,最好使用id訪問,確保物件唯一:function
hitobject
(x, y, dest)
return
false;
}
if (hitobject(event.pagex/zoom, event.pagey/zoom, ".quan1"))
滑鼠鬆開(離開觸控螢幕)時結束拖動,結束拖動一般需要修改目標物件的樣式,表明選中,也可以定位拖動物件,或者把拖動物件還原到原來的位置。還原位置如果是通過修改偏移總有點問題,所以,筆者的做法就是取消拖動新增的樣式:
$("#answer1, #answer2, #answer3").css("top", "").css("left", "").css("position", "");
通過清楚top,left和position樣式就可以了,由於jquery新增的樣式是直接新增到元素上面的,取消掉後,不影響原來通過class新增的樣式。
以上就是通過jquery實現元素拖動的過程和注意事項,希望讀者可以收穫自己的靈感。本文使用touchswipe元件的swipestatus中phase引數檢查拖動的狀態的:
swipestatus : function(event, phase, direction, distance, duration, fingercount, fingerdata )else if (phase == "move")else if (phase == "end")
},
JQuery實現滑鼠拖動元素移動位置
jquery實現元素移動位置有很多種方法,其中乙個是根據滑鼠在指定區域內隨意移動,還有一種的是根據方向鍵在一定區域內上下左右平移。這二種只能說各有優劣,通過方向鍵平移,實現相對簡單,操作也更具備可控性,但是就是移動效率相對較低,每次平移量過大造成不夠精準,平移量過小則會使移動過程更為繁瑣。跟隨滑鼠自...
jQuery實現拖動
定位 給要拖動的物件設定乙個定位 position aboselute 座標 使用event.clientx event.clienty獲取滑鼠位置,使用obj.offset left obj.offset top獲取物件離瀏覽器左上角的座標 事件 mousedown,mouseup,mousemo...
svg中實現元素拖動
svg中實現元素拖動 目錄 html 屬性 初始化 mousedown mousemove mouseup 沒有設定初始值.var originx 0 滑鼠初始位置 var originy 0 var domx 0 dom初始元素 var domy 0 var dom 初始元素 var ismous...