HTML5的出現給網頁設計帶來了許多創新的功能,其中拖動功能成為了廣受歡迎的效果之一。仿淘寶拖動代碼是一種許多前端工程師喜歡使用的實現方式之一。下面將介紹這種代碼實現的具體細節。
function setDrag(selector) { var obj = $(selector); obj.bind("mousedown", start); function start(e) { var position = obj.position();//獲取當前元素的位置 var disX = e.clientX - position.left; var disY = e.clientY - position.top; $(document).bind("mousemove", move); $(document).bind("mouseup", stop); function move(e) { var left = e.clientX - disX; var top = e.clientY - disY; obj.css({"left": left + "px", "top": top + "px"}); } function stop() { $(document).unbind("mousemove", move); $(document).unbind("mouseup", stop); } } }
這段代碼是一個jQuery的拖動插件,通過setDrag(selector)函數來實現拖動效果。主要的實現還是在start函數中的邏輯。當鼠標在目標元素上按下時,獲取到了目標元素的絕對位置,計算出鼠標離目標元素左上角的距離,然后通過mousemove事件實時拖動目標元素,并設置它的位置。最后在mouseup事件中解除鼠標移動事件即可停止拖動效果。
這段代碼需要插入到HTML文檔中,并為目標元素設置class或id屬性,使用setDrag(".element")或setDrag("#element")進行調用即可。如此便可以實現一個簡單的仿淘寶拖動效果。