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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章