生活随笔
收集整理的這篇文章主要介紹了
jquery 设置元素拖动效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
jquery 設置頁面元素可拖動效果
使用:
setEleDrag('.go_manager_vote',120,60,function(){
?? ?console.log('執行點擊操作');
});
// 頁面元素可拖動
// ele : $('.class') 或 $('#id')
// _w : 元素寬
// _h : 元素高
// callback : 點擊執行的回調
function setEleDrag(ele,_w,_h,callback){// 點擊if(callback){$(ele).on('click', function(e) {callback();});}var sT, sL, wW, wH;$(ele).on('touchstart', function(e) {// e.preventDefault();sT = parseFloat($(window).scrollTop());sL = parseFloat($(window).scrollLeft());wW = parseFloat($(window).width()) - _w;wH = parseFloat($(window).height()) - _h;});$(ele).on('touchmove', function(e) {e.preventDefault();var touch = e.originalEvent.targetTouches[0];var x = touch.pageX - _w/2 - sL;var y = touch.pageY - _h/2 - sT;// console.log(x , y);x = x < 0 ? 0 : (x > wW ? wW : x);y = y < 0 ? 0 : (y > wH ? wH : y);// console.log(x , y);var theThis = $(this);theThis.css({'position': 'fixed','left': x,'top': y});});$(ele).on('touchend', function(e) {// e.preventDefault();});
}
?
總結
以上是生活随笔為你收集整理的jquery 设置元素拖动效果的全部內容,希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。