Sortable
v1.15.3
Sortableは、並べ替え可能なドラッグアンドドロップリスト用のJavaScriptライブラリです。
デモ：http：//sortablejs.github.io/sortable/
@types/sortablejsのタイプスクリプト定義npmにインストール：
npm install sortablejs --saveBowerでインストール：
bower install --save sortablejsプロジェクトへのインポート：
// Default SortableJS
import Sortable from 'sortablejs' ;
// Core SortableJS (without default plugins)
import Sortable from 'sortablejs/modular/sortable.core.esm.js' ;
// Complete SortableJS (with all plugins)
import Sortable from 'sortablejs/modular/sortable.complete.esm.js' ;チェリーピックプラグイン：
// Cherrypick extra plugins
import Sortable , { MultiDrag , Swap } from 'sortablejs' ;
Sortable . mount ( new MultiDrag ( ) , new Swap ( ) ) ;
// Cherrypick default plugins
import Sortable , { AutoScroll } from 'sortablejs/modular/sortable.core.esm.js' ;
Sortable . mount ( new AutoScroll ( ) ) ; < ul id =" items " >
< li > item 1 </ li >
< li > item 2 </ li >
< li > item 3 </ li >
</ ul > var el = document . getElementById ( 'items' ) ;
var sortable = Sortable . create ( el ) ; ul / liだけでなく、リストとその要素に任意の要素を使用できます。これがdivの例です。
var sortable = new Sortable ( el , {
group : "name" , // or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }
sort : true , // sorting inside list
delay : 0 , // time in milliseconds to define when the sorting should start
delayOnTouchOnly : false , // only delay if user is using touch
touchStartThreshold : 0 , // px, how many pixels the point should move before cancelling a delayed drag event
disabled : false , // Disables the sortable if set to true.
store : null , // @see Store
animation : 150 , // ms, animation speed moving items when sorting, `0` — without animation
easing : "cubic-bezier(1, 0, 0, 1)" , // Easing for animation. Defaults to null. See https://easings.net/ for examples.
handle : ".my-handle" , // Drag handle selector within list items
filter : ".ignore-elements" , // Selectors that do not lead to dragging (String or Function)
preventOnFilter : true , // Call `event.preventDefault()` when triggered `filter`
draggable : ".item" , // Specifies which items inside the element should be draggable
dataIdAttr : 'data-id' , // HTML attribute that is used by the `toArray()` method
ghostClass : "sortable-ghost" , // Class name for the drop placeholder
chosenClass : "sortable-chosen" , // Class name for the chosen item
dragClass : "sortable-drag" , // Class name for the dragging item
swapThreshold : 1 , // Threshold of the swap zone
invertSwap : false , // Will always use inverted swap zone if set to true
invertedSwapThreshold : 1 , // Threshold of the inverted swap zone (will be set to swapThreshold value by default)
direction : 'horizontal' , // Direction of Sortable (will be detected automatically if not given)
forceFallback : false , // ignore the HTML5 DnD behaviour and force the fallback to kick in
fallbackClass : "sortable-fallback" , // Class name for the cloned DOM Element when using forceFallback
fallbackOnBody : false , // Appends the cloned DOM Element into the Document's Body
fallbackTolerance : 0 , // Specify in pixels how far the mouse should move before it's considered as a drag.
dragoverBubble : false ,
removeCloneOnHide : true , // Remove the clone element when it is not showing, rather than just hiding it
emptyInsertThreshold : 5 , // px, distance mouse must be from empty sortable to insert drag element into it
setData : function ( /** DataTransfer */ dataTransfer , /** HTMLElement*/ dragEl ) {
dataTransfer . setData ( 'Text' , dragEl . textContent ) ; // `dataTransfer` object of HTML5 DragEvent
} ,
// Element is chosen
onChoose : function ( /**Event*/ evt ) {
evt . oldIndex ; // element index within parent
} ,
// Element is unchosen
onUnchoose : function ( /**Event*/ evt ) {
// same properties as onEnd
} ,
// Element dragging started
onStart : function ( /**Event*/ evt ) {
evt . oldIndex ; // element index within parent
} ,
// Element dragging ended
onEnd : function ( /**Event*/ evt ) {
var itemEl = evt . item ; // dragged HTMLElement
evt . to ; // target list
evt . from ; // previous list
evt . oldIndex ; // element's old index within old parent
evt . newIndex ; // element's new index within new parent
evt . oldDraggableIndex ; // element's old index within old parent, only counting draggable elements
evt . newDraggableIndex ; // element's new index within new parent, only counting draggable elements
evt . clone // the clone element
evt . pullMode ; // when item is in another sortable: `"clone"` if cloning, `true` if moving
} ,
// Element is dropped into the list from another list
onAdd : function ( /**Event*/ evt ) {
// same properties as onEnd
} ,
// Changed sorting within list
onUpdate : function ( /**Event*/ evt ) {
// same properties as onEnd
} ,
// Called by any change to the list (add / update / remove)
onSort : function ( /**Event*/ evt ) {
// same properties as onEnd
} ,
// Element is removed from the list into another list
onRemove : function ( /**Event*/ evt ) {
// same properties as onEnd
} ,
// Attempt to drag a filtered element
onFilter : function ( /**Event*/ evt ) {
var itemEl = evt . item ; // HTMLElement receiving the `mousedown|tapstart` event.
} ,
// Event when you move an item in the list or between lists
onMove : function ( /**Event*/ evt , /**Event*/ originalEvent ) {
// Example: https://jsbin.com/nawahef/edit?js,output
evt . dragged ; // dragged HTMLElement
evt . draggedRect ; // DOMRect {left, top, right, bottom}
evt . related ; // HTMLElement on which have guided
evt . relatedRect ; // DOMRect
evt . willInsertAfter ; // Boolean that is true if Sortable will insert drag element after target by default
originalEvent . clientY ; // mouse position
// return false; — for cancel
// return -1; — insert before target
// return 1; — insert after target
// return true; — keep default insertion point based on the direction
// return void; — keep default insertion point based on the direction
} ,
// Called when creating a clone of element
onClone : function ( /**Event*/ evt ) {
var origEl = evt . item ;
var cloneEl = evt . clone ;
} ,
// Called when dragging element changes position
onChange : function ( /**Event*/ evt ) {
evt . newIndex // most likely why this event is used is to get the dragging element's current index
// same properties as onEnd
}
} ) ; groupオプションあるリストから別のリストに要素をドラッグするには、両方のリストが同じgroup値を持っている必要があります。また、リストを配り、コピー（ clone ）を与えて保持し、要素を受信できるかどうかを定義することもできます。
String - グループ名true|false|["foo", "bar"]|'clone'|function - リストから移動する能力。 clone - 移動するのではなく、アイテムをコピーします。または、要素を入れることができるグループ名の配列。デフォルトはtrueです。true|false|["baz", "qux"]|function - 他のリストから要素を追加できるか、要素を追加できるグループ名の配列か。boolean - 別のリストに移動した後、クローン化された要素を初期位置に戻します。デモ：
put - pullで複雑なロジックの使用revertClone: trueを使用しますsortオプション内部リストのソートを許可します。
デモ：https：//jsbin.com/jayedig/edit?js、output
delayオプションソートがいつ開始されるかを定義するためのミリ秒単位での時間。残念ながら、ブラウザの制限により、ネイティブのドラッグ＆ドロップでIEまたはエッジで遅延は不可能です。
デモ：https：//jsbin.com/zosiwah/edit?js、output
delayOnTouchOnlyオプションユーザーがタッチを使用している場合にのみ遅延を適用する必要があるかどうか（モバイルデバイスで）。他の場合には遅延は適用されません。デフォルトはfalseになります。
swapThresholdオプション0 1間のフロートとして、スワップゾーンが取り上げるターゲットの割合。
続きを読む
デモ：http：//sortablejs.github.io/sortable#thresholds
invertSwapオプション「間に」アイテムをソートする効果のために、スワップゾーンをターゲットの側面に設定するようにtrueに設定します。
続きを読む
デモ：http：//sortablejs.github.io/sortable#thresholds
invertedSwapThresholdオプション0の間のフロートとして1反転したスワップゾーンが取り上げるターゲットの割合。指定されていない場合、デフォルトはswapThresholdになります。
続きを読む
directionオプションソート可能な方向に分類する方向。 'vertical' 、 'horizontal' 、または関数に設定できます。これは、ターゲットがドラッグされるたびに呼び出されます。 'vertical'または'horizontal'を返す必要があります。
続きを読む
完全な列と半分の列要素を含む垂直リストの方向検出の例：
Sortable . create ( el , {
direction : function ( evt , target , dragEl ) {
if ( target !== null && target . className . includes ( 'half-column' ) && dragEl . className . includes ( 'half-column' ) ) {
return 'horizontal' ;
}
return 'vertical' ;
}
} ) ; touchStartThresholdオプションこのオプションはfallbackToleranceオプションに似ています。
delayオプションが設定されると、Samsung Galaxy S8のような非常に敏感なタッチディスプレイを備えた一部の携帯電話は、指が動いていない場合でも不要なTouchMoveイベントを発射し、その結果、トリガーされません。
このオプションは、遅延並べ替えがキャンセルされる前に発生する必要がある最小ポインターの動きを設定します。
3〜5の値は良いです。
disabledオプションtrueに設定されている場合、ソート可能を無効にします。
デモ：https：//jsbin.com/sewokud/edit?js、output
var sortable = Sortable . create ( list ) ;
document . getElementById ( "switcher" ) . onclick = function ( ) {
var state = sortable . option ( "disabled" ) ; // get
sortable . option ( "disabled" , ! state ) ; // set
} ; handleリスト項目をドラッグ可能にするために、ソート可能な並べ替えがユーザーによるテキストの選択を無効にします。それは必ずしも望ましいとは限りません。テキストの選択を許可するには、ドラッグハンドラーを定義します。ドラッグハンドラーは、すべてのリスト要素をドラッグできるようにする領域です。
デモ：https：//jsbin.com/numakuh/edit?html,js、output
Sortable . create ( el , {
handle : ".my-handle"
} ) ; < ul >
< li > < span class =" my-handle " > :: </ span > list item text one
< li > < span class =" my-handle " > :: </ span > list item text two
</ ul > . my-handle {
cursor : move;
cursor : -webkit-grabbing;
}filterオプション Sortable . create ( list , {
filter : ".js-remove, .js-edit" ,
onFilter : function ( evt ) {
var item = evt . item ,
ctrl = evt . target ;
if ( Sortable . utils . is ( ctrl , ".js-remove" ) ) { // Click on remove button
item . parentNode . removeChild ( item ) ; // remove sortable item
}
else if ( Sortable . utils . is ( ctrl , ".js-edit" ) ) { // Click on edit link
// ...
}
}
} ) ghostClassオプションドロッププレースホルダーのクラス名（デフォルトのsortable-ghost ）。
デモ：https：//jsbin.com/henuyiw/edit?css、js、output
. ghost {
opacity : 0.4 ;
} Sortable . create ( list , {
ghostClass : "ghost"
} ) ; chosenClassオプション選択したアイテムのクラス名（デフォルトのsortable-chosen ）。
デモ：https：//jsbin.com/hoqufox/edit?css、js、output
. chosen {
color : # fff ;
background-color : # c00 ;
} Sortable . create ( list , {
delay : 500 ,
chosenClass : "chosen"
} ) ; forceFallbackオプションtrueに設定すると、HTML5ブラウザーを使用している場合でも、非HTML5ブラウザのフォールバックが使用されます。これにより、新しいブラウザでも古いブラウザの動作をテストする可能性があります。また、デスクトップ、モバイル、および古いブラウザの間でドラッグドロップがより一貫していると感じます。
それに加えて、フォールバックは常にそのDOM要素のコピーを生成し、オプションで定義されているクラスのfallbackClassを追加します。この動作は、この「ドラッグされた」要素の外観を制御します。
デモ：https：//jsbin.com/sibiput/edit?html,css、js、output
fallbackToleranceオプションネイティブのドラッグしきい値をエミュレートします。マウスが抗力と見なされる前に、マウスがどこまで移動するかをピクセルで指定します。アイテムがリンクのリストのようにクリック可能である場合に便利です。
ユーザーがソート可能な要素の内部をクリックすると、プレスするまでからリリースするまでに手を少し動かすことは珍しくありません。ドラッグは、ポインターを特定の許容範囲を通過して移動すると開始されるため、クリックするたびに誤ってドラッグを開始しないようにします。
3〜5はおそらく良い値です。
dragoverBubbleオプションtrueに設定すると、Dragoverイベントは育児の種に泡立ちます。フォールバックとネイティブのドラッグオーバーイベントの両方で動作します。デフォルトではfalseですが、ソート可能は、要素が親ソート可能に挿入された場合にのみイベントの泡立ちを停止します。 。
1.8.0以降、おそらくこのオプションを偽として残したいと思うでしょう。 1.8.0の前に、ネストされた並べ替えが機能するためにはtrueである必要があるかもしれません。
removeCloneOnHideオプションfalseに設定されている場合、クローンは、CSS displayプロパティをnoneに設定することで隠されます。デフォルトでは、このオプションはtrueです。つまり、sortableは、非表示になっていると思われる場合に、クローン化された要素をDOMから削除します。
emptyInsertThresholdオプション距離（ピクセル単位）マウスは、ドラッグ要素をドラッグしながら、そのソートに挿入するためにドラッグしながら空のソートからでなければなりません。デフォルトは5です。この機能を無効にするために0に設定します。
デモ：https：//jsbin.com/becavoj/edit?js、output
このオプションに代わるものは、空のときにリストにパディングを設定することです。
例えば：
ul : empty {
padding-bottom : 20 px ;
}警告：for :empty動作するには、内部にノードがない必要があります（テキスト1でも）。
デモ：https：//jsbin.com/yunakeg/edit?html,css、js、output
HTMLElement - リスト、移動要素HTMLElement - 前のリストHTMLElement - ドラッグされた要素HTMLElementNumber|undefined - 親の古いインデックスNumber|undefined - 親の新しいインデックスNumber|undefined - 親の中の古いインデックス、ドラッグ可能な要素のみをカウントするNumber|undefined - 親の新しいインデックス、ドラッグ可能な要素のみをカウントするString|Boolean|undefined - プルモード別のソート可能な（ "clone" 、 true 、or false moveHTMLElementHTMLElementHTMLElementDOMRectHTMLElement - ガイド付き要素DOMRectBoolean - trueターゲットの後に挿入される場合（または前にfalse ）String [、value： * ]）： *オプションを取得または設定します。
HTMLElement [、selector： String ]）： HTMLElement|nullセット内の各要素について、要素自体をテストし、DOMツリーの祖先を通過することにより、セレクターに一致する最初の要素を取得します。
String[] sortableのitem data-id （ dataIdAttrオプション）を文字列の配列にシリアル化します。
String[] 、useanimation： Boolean ）配列に応じて要素をソートします。
var order = sortable . toArray ( ) ;
sortable . sort ( order . reverse ( ) , true ) ; // apply 現在のソートを保存します（ストアを参照）
ソート可能な機能を完全に削除します。
ソートの保存と復元。
< ul >
< li data-id =" 1 " > order </ li >
< li data-id =" 2 " > save </ li >
< li data-id =" 3 " > restore </ li >
</ ul > Sortable . create ( el , {
group : "localStorage-example" ,
store : {
/**
* Get the order of elements. Called once during initialization.
* @param {Sortable} sortable
* @returns {Array}
*/
get : function ( sortable ) {
var order = localStorage . getItem ( sortable . options . group . name ) ;
return order ? order . split ( '|' ) : [ ] ;
} ,
/**
* Save the order of elements. Called onEnd (when the item is dropped).
* @param {Sortable} sortable
*/
set : function ( sortable ) {
var order = sortable . toArray ( ) ;
localStorage . setItem ( sortable . options . group . name , order . join ( '|' ) ) ;
}
}
} )デモ：https：//jsbin.com/visimub/edit?html,js、output
<!-- Latest compiled and minified CSS -->
< link rel =" stylesheet " href =" https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css "/>
<!-- Latest Sortable -->
< script src =" http://SortableJS.github.io/Sortable/Sortable.js " > </ script >
<!-- Simple List -->
< ul id =" simpleList " class =" list-group " >
< li class =" list-group-item " > This is < a href =" http://SortableJS.github.io/Sortable/ " > Sortable </ a > </ li >
< li class =" list-group-item " > It works with Bootstrap... </ li >
< li class =" list-group-item " > ...out of the box. </ li >
< li class =" list-group-item " > It has support for touch devices. </ li >
< li class =" list-group-item " > Just drag some elements around. </ li >
</ ul >
< script >
// Simple list
Sortable . create ( simpleList , { /* options */ } ) ;
</ script >HTMLElement [、options： Object ]）： Sortable新しいインスタンスを作成します。
Sortableアクティブなソート可能なインスタンス。
HTMLElementドラッグされている要素。
HTMLElementゴースト要素。
HTMLElementクローン要素。
HTMLElement ）： Sortable要素上のソート可能なインスタンスを取得します。
...SortablePlugin|SortablePlugin[] ）ソート可能にプラグインを取り付けます。
:HTMLElement 、event :String 、fn :Function ） - イベントハンドラー関数を添付する:HTMLElement 、event :String 、fn :Function ） - イベントハンドラーを削除します:HTMLElement ） :Object - すべてのCSSプロパティの値を取得します:HTMLElement 、prop :String ） :Mixed - スタイルプロパティの値を取得する:HTMLElement 、prop :String 、value :String ） - 1つのCSSプロパティを設定します:HTMLElement 、PROPS :Object ） - より多くのCSSプロパティを設定します:HTMLElement 、tagname :String [、iterator :Function ]） :Array - タグ名で要素を取得する:Mixed 、fn :Function ） :Function - 関数を取り、常に特定のコンテキストを持つ新しいものを返します:HTMLElement 、セレクター:String ） :Boolean - セレクターに対して現在の一致する要素のセットを確認します:HTMLElement 、selector :String [、ctx :HTMLElement ]） :HTMLElement|Null - セット内の各要素について、要素自体をテストし、domの祖先を通過する要素自体をテストしてセレクターに一致する最初の要素を取得します。木:HTMLElement ） :HTMLElement - 一致した要素のセットの深いコピーを作成します:HTMLElement 、name :String 、state :Boolean ） - 各要素から1つのクラスを追加または削除する:HTMLElement ） :String - 'vertical'または'horizontal'として要素の方向を自動的に検出します:HTMLElement 、selector :String ） :Number - 選択した要素のセットの親の要素のインデックス:HTMLElement 、childnum :Number 、options :Object 、inclagel :Boolean ）： HTMLElement - 並べ替え可能なインスタンス内のドラッグ可能要素の特定のインデックスでドラッグ可能な要素を取得します:String - 内部使用のための拡張プロパティ名、sortablElistelement [endaxo]そのエレメネットのソート可能なインスタンスを返します <!-- jsDelivr :: Sortable :: Latest (https://www.jsdelivr.com/package/npm/sortablejs) -->
< script src =" https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js " > </ script >これを読んでください。
このプロジェクトは、貢献するすべての人々のおかげで存在します。 [貢献する]。
財政的な貢献者になり、コミュニティを維持するのを手伝ってください。 [貢献する]
組織でこのプロジェクトをサポートしてください。あなたのロゴは、あなたのウェブサイトへのリンクでここに表示されます。 [貢献する]
このソフトウェアおよび関連するドキュメントファイル（「ソフトウェア」）のコピーを取得している人に、これにより許可が無料で許可され、制限なしにソフトウェアを扱うことができます。 、ソフトウェアのコピーを公開、配布、サブライセンス、および/または販売し、次の条件を条件として、ソフトウェアが提供される人を許可します。
上記の著作権通知とこの許可通知は、ソフトウェアのすべてのコピーまたはかなりの部分に含まれるものとします。
このソフトウェアは、商品性、特定の目的への適合性、および非侵害の保証を含むがこれらに限定されない、明示的または黙示的なものを保証することなく、「現状のまま」提供されます。いかなる場合でも、著者または著作権所有者は、契約、不法行為、またはその他の訴訟、ソフトウェアまたは使用またはその他の取引に関連する、またはその他の契約、またはその他の請求、またはその他の責任について責任を負いません。ソフトウェア。
