<tr id="ublig"><code id="ublig"><delect id="ublig"></delect></code></tr>
  • <noframes id="ublig"></noframes>
    1. <output id="ublig"></output>

    2. <mark id="ublig"><rp id="ublig"></rp></mark>

      <sup id="ublig"></sup>

      dragsort:支持拖動排序js前端組建

      發布日期:2021年01月27日 瀏覽次數:11563 js 拖拽排序

      1、支持拖動排序

      2、支持排序后觸發事件,將順序保存。

      代碼如下:


      <!DOCTYPE html><html><head>
      	<title>DragSort Example</title>
      	<meta charset="utf-8" />
      	<style type="text/css">
      		ul { margin:0px; padding:0px; margin-left:20px; }		#list1 { width:100%; list-style-type:none; margin:0px; }		#list1 div { width:10%; height:50px; border:solid 1px black; background-color:#E0E0E0; text-align:center; padding-top:40px;float:left;margin-left:10px; }		.placeHolder div { background-color:white !important; border:dashed 1px gray !important; }	</style></head><body>
      	<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
      	<script type="text/javascript" src="jquery.dragsort-0.5.2.min.js"></script>
      	
      	
      	
      	<div id="list1">
      		<div>1</div>
      		<div>2</div>
      		<div>3</div>
      		<div>4</div>
      		<div>5</div>
      		<div>6</div>
      		<div>7</div>
      		<div>8</div>
      		<div>9</div>
      	</div>
      	<input name="list1SortOrder" type="hidden" />
      
      	<script type="text/javascript">
      		$("#list1").dragsort({ dragSelector: "div", dragBetween: true, dragEnd: saveOrder, placeHolderTemplate: "" });		
      		function saveOrder() {			var data = $("#list1 li").map(function() { return $(this).children().html(); }).get();
      			$("input[name=list1SortOrder]").val(data.join("|"));
      		};	</script></body></html>


      jquery.dragsort.js 實現拖拽過程遇到的問題

      1、在IE下第一次拖動的時候,被拖動的li元素會不顯示,查了很多資料發現是因為在IE中定位出了問題,li標簽還在,只是位置計算出錯。解決的辦法是在li的css樣式中position設置為relative。這個問題在火狐等其他瀏覽器是不存在的。

      2、如果拖動的li所在容器出現了滾動條,當滾動條滑到最下面的時候,拖拽下面的li的浮動層位置會出現偏移。解決的辦法是在jquery.dragsort.js中,this.draggedItem.css({ top: top, left: left });這句話決定了浮動層的位置,只需將top值加上容器滾動條的scrollTop值即可。

      附帶jquery.dragsort.js中參數的解釋:

      dragSelector -- CSS選擇器內的元素的列表項的拖動手柄。默認值是“li”。
      dragSelectorExclude  -- CSS選擇器的元素內的dragSelector不會觸發dragsort的。默認值是"input, textarea, a[href]"。
      dragEnd  -- 拖動結束后將被調用的回調函數.
      dragBetween  -- 設置為“true”,如果你要啟用多組列表之間拖動選定的列表。 默認值是false。
      placeHolderTemplate  -- 拖動列表的HTML部分。默認值是"<li></li>".
      scrollContainer  -- CSS選擇器的元素,作為滾動容器,例如溢出的div設置為自動。 默認值是“窗口“.
      scrollSpeed  -- 一個數字,它代表了速度,頁面拖動某一項時,將滾動容器外,較高使用價值的是速度和較低的值是較慢的。 如果設置為"0"以禁用滾動。默認值是"5".




      延伸閱讀

      微信小程序各種圖表繪制

      在做應用系統開發的時候,我們經常需要繪制各種統計圖表。如何做呢?這篇文章給你一個思路參考。

      初識 客戶端js DDOS攻防

      我們將從"攻"和"防"兩方面與您一同梳理JavaScript DDoS: 攻擊:攻擊者如何通過惡意地址、服務器劫持、中間人等手段來實施DDoS攻擊。 防御:網站如何使用HTTPS和SRI(Subresource Integrity)等手段來避免攻擊。

      百度編輯器上傳圖片時設置圖片展示的最大寬度

      百度編輯器上傳圖片能自動裁切圖片大小嗎? 這個我暫時不知道,不過作為應急辦法,可以暫時先設置圖片的最大寬度。如果哪位網友知道如何通過百度編輯器自動裁切壓縮圖片大小請告知,不勝感激。

      跨域資源共享 CORS 詳解

      CORS需要瀏覽器和服務器同時支持。目前,所有瀏覽器都支持該功能,IE瀏覽器不能低于IE10。 整個CORS通信過程,都是瀏覽器自動完成,不需要用戶參與。對于開發者來說,CORS通信與同源的AJAX通信沒有差別,代碼完全一樣。

      mysql 字符串截取

      數據庫開發過程中常用的字符串截取操作。

      dragsort:支持拖動排序js前端組建

      前端js拖拽排序組建, 看起來不錯. 收藏了.

      css選中子元素中不是第一個元素的3種方法

      前端開發中經常需要設置非第一個元素之外的樣式,這篇文章做一個總結. 需要的小伙伴歡迎查閱和分享.

      純 CSS 實現繪制各種三角形(各種角度)

      用CSS繪制三角形,這在前端開發過程中是比較常見的. 以前都是使用圖片代替, 當你看到這篇文章之后,也許以后遇到類似需求,就告別PS了.

      面向個體戶與個人的賬目小程序上線

      重點推薦給個體戶,個人家庭,個人合租用戶,臨時項目辦事等使用.用完即走,不轉內存, 可以多人合作記賬. AA記賬自動分賬. 單獨設置每個用戶的權限等非常實用的功能,大家合租的記賬隨時知道,統計功能也很強大,最重要是用起來很簡單,沒其他記賬產品那么復雜。

      廣西空中課堂在小程序發布視頻點播課

      覆蓋小學、初中、高中的12個年級的廣西中小學生“空中課堂”線上課程正式推出,而課堂小編輯選擇本公司小程序平臺發布,方便家中無法收視電視的同學方便使用手機端點播學習。
      亚洲综合憿情五月丁香五月网