使用jQuery實現元素拖動的要點

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();

在移動事件中，我們修改拖動物件的偏移位置，達到拖動的效果。

如果拖動的過程中需要檢測是否命中目標物件（拖動的目的），我們需要檢查當前位置是否落在目標物件的範圍內，使用如下**：

function
hitobject
(x, y, dest)
return
false;
}

hitobject需要三個引數，x,y為頁面座標，dest為檢查的目標元件，比如,」.quan1」就是具有quan1的類物件，最好使用id訪問，確保物件唯一：

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實現拖動

svg中實現元素拖動

使用jQuery實現元素拖動的要點

JQuery實現滑鼠拖動元素移動位置

jQuery實現拖動

svg中實現元素拖動

相關推薦