iT邦幫忙

2018 iT 邦幫忙鐵人賽
1
Modern Web

30天學習30套前端技術(2018年)系列 第 37

[十分鐘學習] Sortable - HTML物件乾坤大挪移

example1

Sortable可以對HTML物件做拖曳移動清單的JavaScript函式庫,支援行動裝置且不依賴jQuery等其他第三方,並相容Bootstrap等CSS框架

GitHub Star: 12,000
Javascripting Overall: 91%
瀏覽器: ChromeFirefoxIE9+
RWD: 不支援(可運作)
License: MIT


《安裝》

  • CDN

      <!-- Sortable v1.6.1/ -->
      <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.6.1/Sortable.min.js"></script>
    
  • npm

      $ npm install sortablejs --save
    
  • Bower

      $ bower install --save sortablejs
    

《範例》

  • 可拖曳的項目

      <div class="example">
      	<ul id="items">
      		<li class="item">li 1</li>
      		<li class="ignore">li 2(ignore)</li>
      		<li class="item">li 3</li>
      		<li class="item">li 4</li>
      	</ul>
      </div>
      <script>
      	var el = document.getElementById( "items" );
      	Sortable.create(el, {
      		// 參數設定[註1]
      		disabled: false, // 關閉Sortable
      		animation: 150,  // 物件移動時間(單位:毫秒)
      		handle: ".example",  // 可拖曳的區域
      		filter: ".ignore",  // 過濾器,不能拖曳的物件
      		preventOnFilter: true, // 當過濾器啟動的時候,觸發event.preventDefault()
      		draggable: ".item",  // 可拖曳的物件
      		ghostClass: "sortable-ghost",  // 拖曳時,給予物件的類別
      		chosenClass: "sortable-chosen",  // 選定時,給予物件的類別
      		forceFallback: false  // 忽略HTML5 DnD
      	});
      </script>
    

    [註1]

    參數 描述

    disabled|關閉Sortable
    animation|物件移動時間(單位:毫秒)
    handle|可拖曳的區域
    filter|過濾器,不能拖曳的物件
    preventOnFilter|當過濾器啟動的時候,觸發event.preventDefault()
    draggable|可拖曳的物件
    ghostClass|拖曳時,給予物件的類別
    chosenClass|選定時,給予物件的類別


《延伸》

  1. Sortable. No jQuery.
  2. RubaXa/Sortable: Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery. Supports Meteor, AngularJS, React, Polymer, Knockout and any CSS library, e.g. Bootstrap.

上一篇
[十分鐘學習] Leaflet - 全民地圖改造王
下一篇
[十分鐘學習] clipboard.js - 複製/貼上
系列文
30天學習30套前端技術(2018年)61
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言