整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          以優雅的方式實現HTML表格的拖拽和排序功能-Table-draagger

          我們都知道普通的HTML自帶的功能相對有限,很多復雜的交互式場景,如果手動去寫功能的話會非常的復雜,而且可擴展性差,就拿HTML表格來說,對于初學者或者對于復雜的拖拽式交互編程不熟悉的話會很浪費時間,因此今天就介紹一個第三方的插件——Table-draagger,來輕松實現類似的功能。Table-draagger是用于構建可重排序的拖放表的極簡主義純Javascript庫!



          Github

          https://github.com/sindu12jun/table-dragger


          特征

          Table-draagger因為其以下幾個特征而讓拖拽和排序的實現變得如此簡單:

          • 非常容易配置
          • 能夠同時對列或行進行排序
          • 排序時動畫流暢
          • 沒有臃腫的依賴
          • 提供觸摸事件(意味著在觸摸設備可以實現一些你想要的功能)


          安裝使用

          • 安裝

          可以在npm上獲得它:

          npm install table-dragger --save
          

          或者引用壓縮的js文件

          <script src="../node_modules/table-dragger/dist/table-dragger.min.js"></script>
          

          或者嘗試開發中的不穩定版本

          npm install table-dragger@next --save
          

          • 快速入門

          請看以下代碼:

          import tableDragger from 'table-dragger'
          tableDragger(el, options?)
          

          <table id="table">
          <thead>
          <tr>
          <th class='handle'>header1</th>
          <th class='handle'>header2</th>
          </tr>
          </thead>
          <tbody>
          <tr>
          <td>conten1</td>
          <td>conten2</td>
          </tr>
          </tbody>
          </table>
          

          var el = document.getElementById('table');
          var dragger = tableDragger(el, {
          mode: 'row',
          dragHandler: '.handle',
          onlyBody: true,
          });
          dragger.on('drop',function(from, to){
          console(from);
          console(to);
          });
          

          你可以在不設置任何參數的情況下使用默認的拖拽和排序方式,當然以下是你可以配置的選項:

          • options.mode

          1、將mode設置為column,用戶拖動和排序表的列

          2、將mode設置為row,用戶拖動并排序表的行

          3、設置mode為free,用戶根據點擊后鼠標移動的方向拖動行或列。注意,必須在自由模式下指定dragHandler。

          • options.dragHandler

          dragHandler是表中的拖動句柄選擇器默認情況下,在列模式下,dragHandler是表的第一行;在行模式下,則是第一列。

          • options.onlyBody

          在行模式下將onlyBody設置為true時,用戶只能在tbody中提升行。

          • API

          下面是返回對象的API


          tableDragger(document.querySelector('#event-table'), { mode: 'free', dragHandler: '.handle', onlyBody: true })
          .on('drag', () => {
          console.log('drag');
          })
          .on('drop', (from, to, el, mode) => {
          console.log(`drop ${el.nodeName} from ${from} ${mode} to ${to} ${mode}`);
          })
          .on('shadowMove', (from, to, el, mode) => {
          console.log(`move ${el.nodeName} from ${from} ${mode} to ${to} ${mode}`);
          })
          .on('out', (el, mode) => {
          console.log(`move out or drop ${el.nodeName} in mode ${mode}`);
          });
          


          總結

          Table-draagger為我們節省了很多手動封裝表格排序和拖拽功能的時間,當然目前很多第三方框架已經實現了類似的功能,這更適用于原生的html表格,你還可以通過一些手段記憶用戶拖拽,這只是其中一種思路,Enjoy it!~

          近筆者專注于研究可視化搭建平臺的解決方案, 分析了很多拖拽組件和頁面動態化技術, 也在 H5-Dooring 項目中做了很多技術實現, 包括:

          • 搭建平臺的組件設計和分類模式
          • 拖拽生成頁面方案
          • 動態表單編輯器設計
          • 頁面實時預覽編譯技術
          • 自定義組件和自定義模版方案
          • 多人協作的可視化搭建模式實現

          還有很多技術細節這里不一一舉例了, 最近在研究自由布局時發現有這樣一個需求, 我們可以自由拖拽和縮放組件, 并能從組件的不同緯度拖拽, 如下圖所示:

          基于react的組件拖拽縮放庫@alex_xu/rc-drag

          由于我們的技術棧采用的是 React, 目前還沒有一個成熟庫可以同時支持自由拖拽和縮放, 我們不得不用 react-dragablereact-resiable兩個庫來實現拖拽和縮放, 但是這樣我們要維護的數據結構就相當復雜了(當然vue生態有成熟的vue-dragable等來支持自由拖拽和縮放), 所以最后筆者決定自己來實現一個.

          我們從可視化搭建平臺的實際業務出發, 可以分析出拖拽縮放有如下幾個功能點:

          • 自由拖拽
          • 支持控制點, 多方位縮放
          • 支持自由控制層級
          • 支持組件靜態化(即為了實現固定, 預覽頁面等效果)
          • 拖拽縮放的數據能回傳給上層組件并提供受控機制

          實現以上四點我們就可以實現一個可用的拖拽縮放組件. 接下來筆者就來介紹一下實現的開源拖拽縮放組件rc-drag.

          實現自由拖拽

          rc-drag未壓縮的體積只有20多k, 去除注釋核心代碼不到200行, 可以說是一個非常輕量的拖拽縮放組件庫了, 我們要想讓自己的組件能自由拖拽, 只需要使用如下方式:

          1. 安裝
          npm i @alex_xu/rc-drag
          # 或
          yarn add @alex_xu/rc-drag
          1. 基本使用
          <div id="box" style={{position: 'relative', width: '500px', height: '260px'}}>
            <Drag container="#box" size={[200, 200]}>
              <p>Mr xu</p>
            </Drag>
          </div>

          我們只需要以上幾行代碼就能實現組件的自由拖拽. 效果如下:

          基于react的組件拖拽縮放庫@alex_xu/rc-drag

          解決可視化搭建平臺頁面層級的問題

          目前在 h5-dooring 是通過橫向擴展來解決組件層級和嵌套的問題, 如果我們采用自由拖拽布局, 層級和嵌套的問題就很好解決了. 在 @alex_xu/rc-drag 這個庫中筆者實現設置層級的功能, 所以我們可以通過給拖拽組件設置不同的層級, 來實現頁面元素疊加和層的概念. 如下設置:

          <Drag container="#box" size={[10, 50]} zIndex={10}>
            <p>Mr xu</p>
          </Drag>

          基于react的組件拖拽縮放庫@alex_xu/rc-drag

          我們通過給組件設置更高的層級來實現組件堆疊的效果.

          實現組件靜態化

          我們往往會在編輯頁面時對組件進行拖拽等操作, 但是有些場景我們需要讓組件固定, 比如頭部或者頁腳, 或者鎖定某個元素, 類似于 PS 里圖層鎖定. 另一個場景是我們要實現公共的頁面渲染器, 在編輯狀態下可以自由拖動縮放, 但是在預覽狀態下需要讓元素固定, 不能出現自有拖拽等功能, 類似 h5-dooring 那種模式, 這個時候我們需要讓拖拽組件@alex_xu/rc-drag支持靜態化. 這個時候我們可以設置isStatic屬性為true, 如下圖:

          基于react的組件拖拽縮放庫@alex_xu/rc-drag

          代碼如下:

          <Drag container="#box" isStatic={true}><p>static item</p></Drag>

          我們可以利用這個屬性, 寫個頁面渲染器, 用戶在預覽時將組件的isStatic設置為true即可, 源碼的底層實現其實也很簡單, 就是利用react-hoooks的組件編寫方式寫個判斷即可:

          {
             isStatic ? 
                <div className="x-drag-item" style={style}>{ children }</div>
                :
                <div 
                  className="x-drag-item" 
                  style={style} 
                  onMouseDown={(e) => onMouseDown('move', e)} 
                  onMouseUp={onMouseUp} onMouseMove={onMouseMove}
                >
                </div>
          }
          

          實現組件數據上報

          我們都知道組件單純只有拖拽縮放能力遠遠不能滿足業務需求, 對于可視化拖拽組件, 更重要的是要能保留拖拽后的數據, 比如寬高,位置,層級等數據, 所以我們需要監控幾個事件, 并將數據傳給對應的事件來讓外層能監聽和獲取. 這里筆者提供了兩個拖拽回傳方法: onDrapStart onDrapStop

          后面根據實際情況可以對應添加. 我們可以在父組件中綁定對應的方法, 如下:

          <Drag 
            container="#box" 
            size={[200, 200]} 
            zIndex={2} 
            onDragStart={(item) => console.log('start', item)} 
            onDragStop={(item) => console.log('stop', item)}
          >
            <p>Mr xu</p>
          </Drag>

          這樣我們就能在父層拿到對應的數據并保存下來了, 進而也就能實現我們的預覽頁面的功能了. 具體可以參考H5-Dooring 渲染器的部分.

          以上幾個技術點和技術實現是可視化拖拽組件必備的要素, 大家可以使用參考一下.

          github地址: 傳送門

          如果大家對可視化搭建平臺感興趣, 可以參考 H5-Dooring 相關的技術文章來了解更多lowcodenocode 的知識.

          最后

          覺得有用 ?喜歡就收藏,順便點個贊吧,你的支持是我最大的鼓勵!微信搜 “趣談前端”,發現更多有趣的H5游戲, webpack,node,gulp,css3,javascript,nodeJS,canvas數據可視化等前端知識和實戰.

          家好,我是大澈!

          本文1900+,整篇閱讀大約需要5分鐘。

          感謝關注微信公眾號:“程序員大澈”,免費領取"面試禮包"一份,然后免費加入問答群,從此讓解決問題的你不再孤單!


          主站蜘蛛池模板: 色妞AV永久一区二区国产AV| 日韩欧国产精品一区综合无码| 精品一区二区在线观看| 国产美女一区二区三区| 无码中文字幕人妻在线一区二区三区| 精品日本一区二区三区在线观看 | 亚洲熟妇av一区| 亚洲综合av永久无码精品一区二区 | 精品国产鲁一鲁一区二区| 天天爽夜夜爽人人爽一区二区 | 日韩精品一区二区三区视频| 精品伦精品一区二区三区视频 | 在线|一区二区三区四区| 亚洲日本va午夜中文字幕一区| 一本岛一区在线观看不卡| 最新中文字幕一区| 亚洲综合一区二区精品久久| 一区二区三区AV高清免费波多| 午夜福利无码一区二区| 无码少妇一区二区三区浪潮AV| 一区二区三区国产| 日韩精品无码免费一区二区三区| 无码精品人妻一区二区三区中 | 日本一区二区三区精品视频| 国产一区二区福利久久| 波多野结衣一区二区三区88 | 亚洲一区二区三区在线| 久久久无码一区二区三区| 精品一区二区三区四区在线播放 | 亚洲一区日韩高清中文字幕亚洲| 人妻体内射精一区二区| 国产精品亚洲高清一区二区 | 卡通动漫中文字幕第一区| 国产精品被窝福利一区| 人妻无码一区二区三区AV| 国产成人av一区二区三区在线| 久久无码一区二区三区少妇| 日韩免费视频一区二区| 国产成人精品第一区二区| 无码精品一区二区三区| 国产精品毛片a∨一区二区三区|