jQuery移动端拖动div
生活随笔
收集整理的這篇文章主要介紹了
jQuery移动端拖动div
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
有用的話點(diǎn)個(gè)贊再走唄~
<!DOCTYPE html> <html lang="en"><head><title>圖標(biāo)自由拖拽</title> </head><body><div id="drag">活動(dòng)規(guī)則</div><script>var dragNode = $("#drag");/*** @function 圖標(biāo)自由拖拽* @param {String} _id 傳入需要移動(dòng)的元素的ID選擇器名* @description 盒子最好不要設(shè)置內(nèi)邊距，否則圖標(biāo)在移向右邊時(shí)會(huì)對(duì)不齊*/function moveBox (_id) {var _block = document.getElementById(_id);var _init_left, _init_top, _div_top, _div_left, _box_width, _box_heiht;var _win_height = $(window).height();var _win_width = $(window).width();_block.addEventListener('touchstart', function (e) {_init_left = parseInt(e.touches[0].clientX);_init_top = parseInt(e.touches[0].clientY);_div_top = $("#" + _id).offset().top - $(window).scrollTop();_div_left = $("#" + _id).offset().left;_box_width = $("#" + _id).width();_box_heiht = $("#" + _id).height();});_block.addEventListener('touchmove', function (e) {e.preventDefault();var _left = parseInt(e.touches[0].clientX);var _top = parseInt(e.touches[0].clientY);var _need_left = _div_left + (_left - _init_left);var _need_top = _div_top + (_top - _init_top);//檢測(cè)_block是否還存在可視區(qū)域var _max_left = _win_width - _box_width;var _max_top = _win_height - _box_heiht;if (_need_left < 0) _need_left = 0;if (_need_left > _max_left) _need_left = _max_left;if (_need_top < 0) _need_top = 0;if (_need_top > _max_top) _need_top = _max_top;$('#' + _id).css({'top': _need_top + 'px','left': _need_left + 'px','z-index': 9,})});_block.addEventListener('touchend', function (e) {var _endX = e.changedTouches[0].clientX;if (_endX <= _win_width / 2) {$('#' + _id).animate({left: 0})} else {var _right = _win_width - 56;$('#' + _id).animate({left: a + "px"})}});}moveBox("moveBox");</script> </body></html>總結(jié)
以上是生活随笔為你收集整理的jQuery移动端拖动div的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： week 3 7月14日
- 下一篇： 寻找终极流量，县镇市场+线下零售+社交零