寫了一個(gè)拖動(dòng)排序插件

wangbinke 發(fā)布于2019-08-22 16:13 / 385人閱讀

摘要：是一款拖動(dòng)排序插件，適配端和手機(jī)端。地址結(jié)構(gòu)用法只需要一個(gè)對(duì)象參數(shù)第一個(gè)參數(shù)為元素第二個(gè)參數(shù)為一個(gè)對(duì)象此對(duì)象可省略，則啟用默認(rèn)配置其中為拖動(dòng)時(shí)候的浮層元素的一些樣式配置項(xiàng)，為底層選中的元素樣式配置項(xiàng)歡迎

drag.js

drag.js是一款拖動(dòng)排序插件，適配pc端和手機(jī)端。
demo地址 --https://tls1234.github.io/drag

html 結(jié)構(gòu)


   item1
   item2
   item3
   item4
   item5

用法 ?

只需要new一個(gè) Drag()對(duì)象

new Drag( )

參數(shù)

第一個(gè)參數(shù)為ul元素
第二個(gè)參數(shù)為一個(gè)Object對(duì)象 (此對(duì)象可省略，則啟用默認(rèn)配置)
其中 supernatant為拖動(dòng)時(shí)候的浮層元素的一些樣式配置項(xiàng)， select為底層選中的元素樣式配置項(xiàng)

var drag = new Drag(".item-group", {
        supernatant: {
            boxShadow : "0 4px 10px #DEDADA",
            background : "#fff",
            opacity: "0.8"
        },
        select: {
            background: "#efefef"
        }
    })

歡迎star https://github.com/tls1234/drag

云服務(wù)器 GPU云服務(wù)器拖動(dòng)排序 js拖動(dòng)排序拖動(dòng)一個(gè)HTML元素行拖動(dòng)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/94145.html

相關(guān)文章

分享一個(gè)jQuery的拖動(dòng)排序插件

摘要：基于的拖動(dòng)排序插件代碼地址核心代碼由于有些瀏覽器的圖片和鏈接是默認(rèn)可以拖動(dòng)的，所以屏蔽掉的事件只允許鼠標(biāo)左鍵拖動(dòng)禁止在表單元素里面拖動(dòng)滾動(dòng)條的位置向上排序向下排序用法水平有限，歡迎提出寶貴意見一起交流學(xué)習(xí) 基于jQuery的拖動(dòng)排序插件代碼地址：https://github.com/ylb1992/dr...核心代碼： (function($) { use strict; ...

zzbo 2019-08-20 16:53 評(píng)論0 收藏0
TP5實(shí)現(xiàn)表格拖動(dòng)排序并保存到數(shù)據(jù)庫(kù)功能

摘要：于是我就研究如何拖動(dòng)排序并永久把排序保存到數(shù)據(jù)庫(kù)中，做了小時(shí)，做出來(lái)了。現(xiàn)在只是實(shí)現(xiàn)了在當(dāng)前頁(yè)面排序，但數(shù)據(jù)庫(kù)還是老樣子。在每次拖動(dòng)完成后，利用這款插件內(nèi)置的函數(shù)，通過(guò)方式把排序完成的每個(gè)行的傳到后臺(tái)。前一段時(shí)間修改了一個(gè)舊的項(xiàng)目，客戶要求我給表格重新排序，按醫(yī)生的職稱排序。因?yàn)榭蛻舻倪@個(gè)項(xiàng)目是醫(yī)院的人事系統(tǒng)，考慮到整個(gè)醫(yī)院有幾千號(hào)人，要是一個(gè)個(gè)按客戶的要求排得累壞我的小腰...幸好...

Aomine 2019-08-23 16:06 評(píng)論0 收藏0
TP5實(shí)現(xiàn)表格拖動(dòng)排序并保存到數(shù)據(jù)庫(kù)功能

摘要：于是我就研究如何拖動(dòng)排序并永久把排序保存到數(shù)據(jù)庫(kù)中，做了小時(shí)，做出來(lái)了?，F(xiàn)在只是實(shí)現(xiàn)了在當(dāng)前頁(yè)面排序，但數(shù)據(jù)庫(kù)還是老樣子。在每次拖動(dòng)完成后，利用這款插件內(nèi)置的函數(shù)，通過(guò)方式把排序完成的每個(gè)行的傳到后臺(tái)。前一段時(shí)間修改了一個(gè)舊的項(xiàng)目，客戶要求我給表格重新排序，按醫(yī)生的職稱排序。因?yàn)榭蛻舻倪@個(gè)項(xiàng)目是醫(yī)院的人事系統(tǒng)，考慮到整個(gè)醫(yī)院有幾千號(hào)人，要是一個(gè)個(gè)按客戶的要求排得累壞我的小腰...幸好...

nevermind 2019-08-30 15:56 評(píng)論0 收藏0
TP5實(shí)現(xiàn)表格拖動(dòng)排序并保存到數(shù)據(jù)庫(kù)功能

摘要：于是我就研究如何拖動(dòng)排序并永久把排序保存到數(shù)據(jù)庫(kù)中，做了小時(shí)，做出來(lái)了?，F(xiàn)在只是實(shí)現(xiàn)了在當(dāng)前頁(yè)面排序，但數(shù)據(jù)庫(kù)還是老樣子。在每次拖動(dòng)完成后，利用這款插件內(nèi)置的函數(shù)，通過(guò)方式把排序完成的每個(gè)行的傳到后臺(tái)。前一段時(shí)間修改了一個(gè)舊的項(xiàng)目，客戶要求我給表格重新排序，按醫(yī)生的職稱排序。因?yàn)榭蛻舻倪@個(gè)項(xiàng)目是醫(yī)院的人事系統(tǒng)，考慮到整個(gè)醫(yī)院有幾千號(hào)人，要是一個(gè)個(gè)按客戶的要求排得累壞我的小腰...幸好...

zhiwei 2019-08-02 14:33 評(píng)論0 收藏0
TP5實(shí)現(xiàn)表格拖動(dòng)排序并保存到數(shù)據(jù)庫(kù)功能

摘要：于是我就研究如何拖動(dòng)排序并永久把排序保存到數(shù)據(jù)庫(kù)中，做了小時(shí)，做出來(lái)了?，F(xiàn)在只是實(shí)現(xiàn)了在當(dāng)前頁(yè)面排序，但數(shù)據(jù)庫(kù)還是老樣子。在每次拖動(dòng)完成后，利用這款插件內(nèi)置的函數(shù)，通過(guò)方式把排序完成的每個(gè)行的傳到后臺(tái)。前一段時(shí)間修改了一個(gè)舊的項(xiàng)目，客戶要求我給表格重新排序，按醫(yī)生的職稱排序。因?yàn)榭蛻舻倪@個(gè)項(xiàng)目是醫(yī)院的人事系統(tǒng)，考慮到整個(gè)醫(yī)院有幾千號(hào)人，要是一個(gè)個(gè)按客戶的要求排得累壞我的小腰...幸好...

wudengzan 2019-07-01 12:36 評(píng)論0 收藏0