Pc端和移動端拖拽元件jquery.drag.js

阿新 • • 發佈：2019-01-17

移動市場開始火爆以來，網頁上的拖拽效果則要做到全相容則不是一件易事，因此最近把研究成果奉上，供大家使用。

幾點宣告：

1.被拖拽的元素不要是超連結，因為阻止了預設事件，所以想讓元素內的超連結也開啟是不現實的，否則手工取消預設的阻止程式碼；

2.拖拽意味著該元素是絕對定位，非絕對定位的元素不能被拖拽。

原始碼：

(function($) {
	var old = $.fn.drag;

	function Drag(element, options) {
		this.ver = '1.0';
		this.$element = $(element);
		this.options = $.extend({}, $.fn.drag.defaults, options);
		this.init();
	}

	Drag.prototype = {
		constructor: Drag,
		init: function() {
			var options = this.options;

			this.$element.on('touchstart.drag.founder mousedown.drag.founder', function(e) {
				var ev = e.type == 'touchstart' ? e.originalEvent.touches[0] : e,
					startPos = $(this).position(),
					disX = ev.pageX - startPos.left,
					disY = ev.pageY - startPos.top,
					that = this;

				//記錄初始位置,以便復位使用
				$(this).data('startPos', startPos);

				if (options.before && $.isFunction(options.before)) {
					options.before.call(that, ev);
				}

				$(document).on('touchmove.drag.founder mousemove.drag.founder', function(e) {
					var ev = e.type == 'touchmove' ? e.originalEvent.touches[0] : e,
						$this = $(that),
						$parent = $this.offsetParent(),
						$parent=$parent.is(':root')?$(window):$parent,
						pPos = $parent.offset(),
						pPos=pPos?pPos:{left:0,top:0},
						left = ev.pageX - disX - pPos.left,
						top = ev.pageY - disY - pPos.top,
						r = $parent.width() - $this.outerWidth(true),
						d = $parent.height() - $this.outerHeight(true);

					left = left < 0 ? 0 : left > r ? r : left;
					top = top < 0 ? 0 : top > d ? d : top;

					$(that).css({
						left: left + 'px',
						top: top + 'px'
					});

					if (options.process && $.isFunction(options.process)) {
						options.process.call(that, ev);
					}

					e.preventDefault();
				});

				$(document).on('touchend.drag.founder mouseup.drag.founder', function(e) {
					var ev = e.type == 'touchend' ? e.originalEvent.changedTouches[0] : e;

					if (options.end && $.isFunction(options.end)) {
						options.end.call(that, ev);
					}

					$(document).off('.drag.founder');
				});
			
			    e.preventDefault();
			});
		}
	};

	//jQ外掛模式
	$.fn.drag = function(options) {
		return this.each(function() {
			var $this = $(this),
				instance = $this.data('drag');

			if (!instance) {
				instance = new Drag(this, options);
				$this.data('drag', instance);
			} else {
				instance.init();
			}

			if (typeof options === 'string') {
				//instance.options[options].call(this);
			}

		});
	};

	$.fn.drag.defaults = {
		before: $.noop,
		process: $.noop,
		end: $.noop
	};

	$.fn.drag.noConflict = function() {
		$.fn.drag = old;
		return this;
	};
})(jQuery);

案例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			#div1 {
				width: 100px;
				height: 100px;
				background: green;
				position: absolute;
				left: 10px;
				top: 10px;
				overflow: hidden;
				outline: 0;
			}
		</style>
	</head>

	<body>
		<div id="div1">div1</div>

		<script src="../js/jquery-2.1.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="jquery.drag.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$('#div1').drag({
				before: function(e) {
					$(this).text('拖動前' + e.pageX);
				},
				process: function(e) {
					document.title = '拖動中' + e.pageY;
				},
				end: function(e) {
					$(this).text('拖動完' + e.pageX);
				}
			});
		</script>
	</body>

</html>

Pc端和移動端拖拽元件jquery.drag.js

移動市場開始火爆以來，網頁上的拖拽效果則要做到全相容則不是一件易事，因此最近把研究成果奉上，供大家使用。幾點宣告： 1.被拖拽的元素不要是超連結，因為阻止了預設事件，所以想讓元素內的超連結也開啟是不現實的，否則手工取消預設的阻止程式碼； 2.拖拽意味著該元素是絕對定位，非

js實現一個可以相容PC端和移動端的div拖動效果

拖動時候用到的三個事件：mousedown、mousemove、mouseup在移動端都不起任何作用。畢竟移動端是沒有滑鼠的，查資料後發現，在移動端與之相對應的分別是：touchstart、touc

酷播V4更新了，支持PC端和移動端的視頻預覽功能（收費預覽視頻功能）

href img 收費 oss www. bsp com 蘋果免費感覺要變天了，灰蒙蒙的。好久沒有下雨了... [酷播V4]永久免費的酷播V4，更新了html5和flash播放器的優先級選項，效果：效果演示：http://www.cuplayer.com/CuP

web頁面PC端和移動端的區別

PC端和移動端的區別你知道嗎？截至2015年11月，中國手機上網使用者數已超過9.05億，軟體移動化成為一種趨勢，移動產品經理成為了產品經理的一個重要分支，那麼對於移動端和PC端到底有什麼區別呢？在設計過程中有什麼差異？下面我們逐一分析。一、PC端與移動端區別有人說手機端無

專案部署之nginx實現PC端和移動端自動跳轉

假設PC端域名為 www.abc.com 移動端域名為m.abc.com PC端nginx配置檔案server中加入如下程式碼： if ($http_host !~ "^www.abc.com$") { rewrite ^(.*) http://ww

asp.net Core 使用過濾器判斷請求客戶端是否為移動端,並實現PC端和移動端請求對映和自動跳轉

很多時候我們做網站時單純的用bootstrap等前端框架實現的前端自適應帶給使用者的體驗並不太好，所以為了提高使用者體驗會專門針對PC端網頁重新設計一套移動端網頁，但是怎麼才能做到在移動端訪問PC頁面的時候返回對應的移動端頁面，而不是PC端頁面呢？下面我們就簡單的進行介紹。主要技術是asp.net core。

區分PC端和移動端

nginx目錄結構 nginx ├── conf // 配置檔案 │ └── annotation // 自定義註解 ├── html // html頁面 │ └── pc

網頁自適應pc端和移動端

手機的螢幕比較小，寬度通常在600畫素以下；PC的螢幕寬度，一般都在1000畫素以上（目前主流寬度是1366×768），有的還達到了2000畫素。同樣的內容，要在大小迥異的螢幕上，都呈現出滿意的效果，並不是一件容易的事。於是，網頁設計師不得不面對一個難題：如何才能在不同

利用js自動檢測pc端和移動端，js程式碼，需要寫兩個網頁，一個pc，一個移動端

假設pc/index.html是pc端的網頁，mobile/index.html是移動端的網頁在外部設定一個html進行判斷，分別跳轉； //判斷如果是pc端，自動跳到pc/index.html //安卓手機自動跳到mobile/

Pc端和移動端修改 token使用者資訊，資料的一致性

經常會遇到pc端和移動端登入後需要在redis裡邊儲存使用者資訊，返回一個token給前端，然後通過token獲取使用者資訊，當pc和移動端修改了使用者資訊之後，另一端會的資料還是不會發生改變，所以要在token儲存的過程中做文章： 1 登入時：先獲取token（j

html程式碼，通過識別pc端和移動端，跳轉到不同的頁面

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <!--引入需要的外掛放置自己

pc端和移動端自適應網頁

做網頁時，我們通常需要考慮到不同電腦螢幕尺寸，以及不同手機螢幕大小等問題，解決樣式發生改變的情況，那麼如何解決呢？現在主要是採用自適應來解決高度，寬度的，以及圖片自適應問題，下面就PC端和移動端來總結一下，通常進行自適應高度和寬度，圖片時，一般與頁面的佈局存在關係。1、最

pc端和移動端整合第三方快捷登入 --- 微博為例

通過新浪微博的開放平臺去註冊一個應用。之後你會得到一個App Key和一個App Secret。擁有它們，你才可以申請許可權。 2、在高階資訊中編輯授權回撥頁，這裡與後面程式碼裡的回撥地址要一致 3、微博登入標識的地址如下： https://api.wei

黃聰：原生js的音訊播放器，相容pc端和移動端（原創）

更新時間：2018/9/3 下午1:32:54 更新說明：新增音樂的loop設定和ended事件監聽 loop為ture的時候不執行ended事件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 const wx

如何解決PC端和移動端自適應問題？

做網頁時，我們通常需要考慮到不同電腦螢幕尺寸，以及不同手機螢幕大小等問題，解決樣式發生改變的情況，那麼如何解決呢？現在主要是採用自適應來解決高度，寬度的，以及圖片自適應問題，下面就PC端和移動端來總結一下，通常進行自適應高度和寬度，圖片時，一般與頁面的佈局存在關係。 1、最小尺寸解析度1024*768

JS pc端和移動端共同實現復制到剪貼板功能實現

oct com put 而是 minimum size func char ror JS pc端和移動端實現復制到剪貼板功能實現在網頁上復制文本到剪切板，一般是使用JS+Flash結合的方法，網上有很多相關文章介紹。隨著 HTML5 技術的發展，Flash 已經在很多場合

js中常用的事件（pc端和移動端）

1.點選事件：在pc端是點選事件，但是在移動端是單擊事件，在移動端的專案中我們經常會區分單擊做什麼和雙擊做什麼，所以移動端的瀏覽器在識別click的時候，只有確定是單擊後才會把它執行，在移動端使用click會存在300ms的延遲:瀏覽器在第一次點選結束後，還需要等到300

html5中canvas畫布實現手機端和移動端的刮刮樂效果

用html5中的canvas實現刮刮樂的效果使用html+css實現背景的樣式使用clearRect()方法實現掛去的作用手機端使用addEventListener（）監聽手機端滑動事件to

# Android 極光推送伺服器端和移動端

Android 極光推送伺服器端和移動端這裡是Android 有關伺服器端進行推送和手機客戶端接收的一些簡單的例子伺服器端採用的是MyEclipse2014,手機端是Android studio 2.0 下面是一個簡單的JSP頁面程式碼 <

騰訊 QMUI 的網頁端和移動端框架

騰訊的QMUI團隊開發的QMUI Team框架包括了網頁端、IOS端和移動端。QMUI官網：http://qmuiteam.com/QMUI GitHub原始碼：https://github.com/Q

Pc端和移動端拖拽元件jquery.drag.js

相關推薦