JQソート可能な利用

この記事のみ翻訳レコードビューを行い、GitHubの元のプロジェクト住所： 
https://github.com/RubaXa/Sortable/は  、GitHubの上でローカルSortable.js例にダウンロードすることをお勧めしますがで、ローカルで実行するためにコピーされ  ます。http：// jsbin .COMは、  多くの時間が上で報告されます実行しているSortable is not defined エラー。

Sortable.jsは、近代的なブラウザとタッチデバイスで使用され、再ソートJavaScriptライブラリのリストをドロップし、jQueryの、流星、AngularJS、反応して、ポリマー、ノックアウトおよび任意のCSSライブラリと互換性のためにサポートされています。

機能

1. タッチデバイスと近代的なブラウザ（IE9を含む）のサポート
2. あなたは同じリスト内の別のリストからドラッグすることができますか
3. CSSアニメーションの項目を移動します
4. ハンドルとオプションのテキストのサポートをドラッグします
5. インテリジェントオートスクロール
6. ネイティブHTML5のドラッグを使用し、APIのビルドをドロップ
7. CSSは、任意のライブラリをサポート
8. シンプルなAPI
9. jQueryのに基づいて（だけでなく、サポートされている）ではありません

インストール

NPMが

$ npm install sortablejs --save

• 1

使用

<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（EL、{ 
    グループ： "名前"、または{//名： "..."、プル：[trueに、falseに、クローン]は、PUT：[trueに、falseに、アレイ]} 
    並べ替え：trueに//は、ソート内部リストリストにソートをサポートしています。
    ディレイ：0、開始すべきソートの際の時間を定義するには、ミリ秒単位で開始する必要がありソートを定義するためのミリ秒単位の時間//。
    touchStartThreshold：0、//ピクセル、中クラスは、画素遅延ドラッグイベントPXの数の動きの範囲内でキャンセルされ、どのように多くのピクセルポイントAでは32A（g）は、ドラッグイベントの前に移動する必要が遅れる。
    無効：trueに設定した場合はfalse、//、trueに設定した場合、ソートはソート可能を無効に無効にします。 。 
    ストア：ヌル、// @seeストア 
    ソート時にアニメーション:. 150、//ミリ秒、アニメーションの速度のソートを動かすの記事は、 '0'の項目を移動し、アニメーションの速度を何のアニメーションミリ秒を示していない -アニメーションなし'0'、
    ハンドル：「.MY-ハンドルを」、 //は、 選択リストの項目をドラッグするハンドル、あなたはドラッグに基づいてDOMノードにリスト項目を設定することができます。セレクタリストの項目は、WITHINドラッグハンドル 
    、クラス名「ソート可能に選択された」、// DOMノードを選択すると、このクラスは、適切なスタイルを定義することができます。chosenClass。選択した項目のクラス名
    フィルタ：「.IGNORE要素」、 // ドラッグセレクタ（文字列または関数）をサポートしないことを選択します。それはドラッグセレクタ（文字列または関数）につながらない
    preventOnFilter：trueに、//トリガー`event.preventDefault` filter`（）`を呼び出すとき。`Event.preventDefaultコールは（）` `トリガーされたときfilter` 
    でドラッグ可能：「.Item」、//アイテムはドラッグ可能であるべき要素を指定します。要素を指定でその内側にアイテムをドラッグ可能である必要があり
    ghostClass：「ゴースト・ソート可能」、先にデフォルトのクラス名のDOMノードの//ドラッグ＆ドロップは、このクラスで適切なスタイルで定義することができたとき。クラスのドロッププレースホルダ名
    dragClass：クラス名「ソート可能なドラッグ」、//ドラッグDOMノード、このクラスは、適切なスタイルを定義することもできます。クラスでドラッグするための項目名
    dataIdAttr：「データ-上記ID」、

    forceFallback：偽のは、// HTML5ドラッグ＆ドロップ動作を無視して、ロールバックの使用を強制します。HTML5のドラッグ＆ドロップ動作を無視して強制でキックするフォールバックを

    fallbackClass：「ソート可能-フォールバック」、クラス名は// forceFallback使用DOM要素をクローン化しました。要素forceFallback用いてクローニングDOMクラスの名前
    fallbackOnBodyは：falseに、//クローン化されたDOM要素は、ドキュメントのボディに追加します。クローン化されたINTOでのDOM要素は、文書の本文に追加
    fallbackTolerance：0、マウスを移動する方法をはるかに指定する//ピクセルをドラッグする前に考慮すべきです。どのようにFAR万一を指定して移動中の画素でのマウスのIT前に考慮ドラッグAS。

    スクロール：真に、//またはのHTMLElement 
    のsetData：機能（/ * **れるDataTransfer /のdataTransfer、/ * **のHTMLElement / dragEl）{ 
        をdataTransfer.setData（ 'テキスト'、dragEl.textContent）。 
    scrollFn：機能（offsetX、offsetY、originalEvent、touchEvt、hoverTargetEl）{...} //お持ちの場合は、自己scrollFnスクロールバーが自動スクロールを定義するために使用することができます。カスタムスクロールバーを持っている場合scrollFnができる自動スクロールに使用します
    scrollSensitivity：30、//転がりを開始するどのくらいPXマウスのエッジに近くなければなりません。PXは、マウスでの近くにスクロール開始するエッジでなければなりませんどのように。
    scrollSpeed：10、//スクロール速度。PX 
        VAR itemEl = evt.item; //はのHTMLElementのドラッグ
        evt.toを; //リストのターゲットを
        evt.from; //前のリスト

    } 

    //要素が選択される
    onChoose：機能（/ ** *イベント/ EVT）{ 
        evt.oldIndex。親の中で//要素インデックス
    }、

    //要素のドラッグを開始し
    ONSTART：機能（/ ** *イベント/ EVT）{ 
        evt.oldIndex。親内//要素インデックス
    } 

    //要素のドラッグを終了
    onEnd：機能（/ ** *イベント/ EVT）{
        evt.oldIndex; //古い親要素内の古いインデックス
        evt.newIndex。//新しい親内の要素の新しいインデックスが
    } 

    //要素が別のリストからリストに滴下され
    onAdd：機能（/ ** *イベント/ EVT）{ 
        onEndとして//同じプロパティ
    } 

    //変更リスト内でソート
    にonUpdate。機能（/ ** *イベント/ EVT）{ 
        onEndとして//同じプロパティ
    } 

    //リストに対する変更（削除/更新/追加）によって呼び出さ
    onSort：機能（/ ** *イベント/ EVT）{ 
        // onEndと同じプロパティ
    } 

    //要素が別のリストにリストから削除され
    onRemove：機能（/ ** *イベント/ EVT）{
        onEndとして//同じプロパティ
    } 

    //濾過要素をドラッグしようと
    onFilter：機能（/ ** *イベント/ EVT）{ 
        VAR itemEl = evt.item。tapstart`イベント| //のHTMLElementは`マウスダウンを受け取ります。
    }、
 
    あなたがリストまたはリストの間でアイテムを移動//イベント
    onMove：機能（/ ** *イベント/ EVT、/ ** *イベント/ originalEvent）{ 
        //例：http://jsbin.com/tuyafe/1/edit?js,output 
        evt.dragged。//はのHTMLElementドラッグ
        evt.draggedRect。// TextRectangle {左、上、右и底部は} 
        evt.related。//のHTMLElementは、その上で案内している
        evt.relatedRect。// TextRectangle 
        originalEvent.clientY。//マウスの位置は
        falseを返す//; -のためのキャンセル
    }
 
    要素のクローン作成する場合//呼び出さ
    onClone：機能（/ ** *イベント/ EVT）を{ 
        VAR origEl = evt.item。
        VAR cloneEl = evt.clone。
    } 
}）。

　　

 

グループ

別のリストから要素をドラッグするには、二つのリストグループは、同じ値を持つ必要があります。リストには、申し出を与えるとコピー（クローン）と受光素子を保つことができるかどうかも定義することができます。

1. name：String-グループ名
2. pull：true|false|'clone'|function-リストから移動する機能。クローンは-アイテムをコピーし、代わりに移動します。
3. put：  true|false|["foo", "bar"]|function -あなたは、リストから他の要素を追加したり、配列要素からグループ名を取得することができます。
4. revertClone：  boolean-別のリストに移動し、クローニングされた要素は、初期位置に復帰します。

ソート

リストをソートします。

ディレイ

並べ替えた場合（ミリ秒単位）の開始時間を定義します。

touchStartThreshold

このオプションは、fallbackToleranceオプションに似ています。

非常に敏感なタッチスクリーンの携帯電話（例えばサムスンギャラクシーS8）を持っているそのうちのいくつかは、このオプションは、あなたの指が動いていない場合でも、設定された遅延、後にもソートにつながる不要なタッチモーションイベントをトリガすることができませんトリガされます。

このオプションは、動きをソート遅れてキャンセルする前に発生しなければならない最低限のポインタを設定します。

好ましくは3~5の間です。

使用禁止

設定した場合  true、ソート可能無効にします。

var sortable = Sortable.create(list);

document.getElementById("switcher").onclick = function () { var state = sortable.option("disabled"); // get sortable.option("disabled", !state); // set };

 

ハンドル

リスト項目がドラッグできるようにするには、ソート可能、ユーザーのテキスト選択を無効にします。これは必ずしも満足のいくものではありません。テキストの選択を可能にするには、ドラッグハンドラの定義は、ハンドラは、各リスト要素の領域にドラッグすることが許可されています。

<ul>
    <li><span class="my-handle">::</span> list item text one <li><span class="my-handle">::</span> list item text two </ul>

 

Sortable.create(el, {
    handle: ".my-handle" });

 

.my-handle {
    cursor: move; cursor: -webkit-grabbing; }

 

フィルタ

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）。

.ghost {
  opacity: 0.4; }

 

Sortable.create(list, {
  ghostClass: "ghost" });

 

chosenClass

選択したクラス（デフォルトのDOMノード名sortable-chosen）。

.chosen {
  color: #fff; background-color: #c00; }

 

Sortable.create(list, {
  delay: 500, chosenClass: "chosen" });

forceFallback

我々はHTML5ブラウザを使用している場合でも、trueに設定した場合、また、予備非HTML5のブラウザを使用します。私たちも、新しいブラウザで、古いブラウザの動作をテストするためにこれは、それが可能になり、あなたはまた、モバイル、デスクトップ、および古いブラウザ間のドラッグ＆ドロップは、より一貫性を持たせることができます。

最も重要なことは、フォールバックは、常にDOM要素のコピーであり、かつ追加のクラスがfallbackClassオプションで定義されています。この動作は、この「ドラッグ」の要素の外観を制御します。

fallbackTolerance

ネイティブ抵抗しきい値を模倣します。ピクセル単位でユニットをドラッグする前に、マウスが考慮されるべきで移動する方法をはるかに指定します。このプロジェクトはまた、非常に便利な、リスト内のリンクをクリックすることができます。

とき、ユーザーは、順序要素をクリックを押すと、時間を解放した時間の間に少し珍しい移動することができます。あなたが特定の許容範囲を超えてポインタを移動した場合にのみドラッグを開始するので、あなたが誤ってあなたがドラッグを開始する]をクリックするたびにではないでしょう。

好ましくは3~5の間です。

スクロール

設定した場合true、スクロールの端に到達すると、ページ（またはソーティング領域）。

scrollFn

自動スクロール機能を定義するために使用されます。デフォルトを使用してくださいel.scrollTop / el.scrollLeft。便利なカスタムスクロールバーと専用のスクロール機能があります。

scrollSensitivity

カスタムマウスは、ローリング方式を開始するために、エッジに近接していなければなりません。

scrollSpeed

マウスポインタが入ったscrollSensitivityウィンドウが距離の後に速度をスクロールする必要があります。

イベントオブジェクト

• to：HTMLElement -要素を移動リスト、。
• from：HTMLElement -リストの前に存在していました
• item：HTMLElement -ドラッグ要素
• clone：HTMLElement
• oldIndex：Number|undefined -古いインデックスの親
• newIndex：Number|undefined -新しいインデックスの親

移動 - イベントオブジェクトを

• to：HTMLElement
• from：HTMLElement
• dragged：HTMLElement
• draggedRect：TextRectangle
• related：HTMLElement -案内要素
• relatedRect：TextRectangle

方法

オプション（名称：文字列[、値：]）：

オプションを取得または設定します。

最も近い（エル：文字列[、セレクタ：のHTMLElement]）：のHTMLElement |ヌル

集合の各要素に対して、テストエレメント自体によってセレクタに一致する最初の祖先要素を取得するためにDOMツリーをトラバース。

toArray（）：String []型

ソート項目は文字列の配列にデータID（dataIdAttrオプション）配列であってもよいです。

ソート（順：String []型）

配列からの要素を並べ替えます。

var order = sortable.toArray();
sortable.sort(order.reverse()); // apply

• 1
• 2

保存する（）

現在のソートを保存

破壊する（）

ソート可能な完全削除機能。

格納

保存して秩序を回復。

<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('|')); } } })

 

静的メソッドとプロパティ

Sortable.create（EL：のHTMLElement [、オプション：オブジェクト]）：ソート可能

新しいインスタンスを作成します。

Sortable.active:Sortable

アクティブ・インスタンスにリンクされています。

Sortable.utils

• on(el:HTMLElement, event:String, fn:Function) - 追加のイベントハンドラ
• off(el:HTMLElement, event:String, fn:Function) - イベントハンドラを削除します
• css(el:HTMLElement):Object - すべてのCSSプロパティの値を取得します。
• css(el:HTMLElement, prop:String):Mixed - スタイルプロパティの値を取得します。
• css(el:HTMLElement, prop:String, value:String) - CSSプロパティを設定します
• css(el:HTMLElement, props:Object) - その他の設定CSSプロパティ
• find(ctx:HTMLElement, tagName:String[, iterator:Function]):Array - タグ名で要素を取得します。
• bind(ctx:Mixed, fn:Function):Function - Tは、特定のコンテキストで常に機能を返し、機能を取得します。
• is(el:HTMLElement, selector:String):Boolean - セレクタの要素の現在のマッチしたセットをチェック
• closest(el:HTMLElement, selector:String[, ctx:HTMLElement]):HTMLElement|Null - テストエレメント自体によってコレクション内の各要素、および最初の祖先要素がセレクタと一致し得るためにDOMツリーをトラバース
• clone(el:HTMLElement):HTMLElement - 要素ディープコピーのマッチングセットを作成します
• toggleClass(el:HTMLElement, name:String, state:Boolean) - 各クラスから要素を追加または削除

CDN

<!-- jsDelivr :: Sortable (https://www.jsdelivr.com/package/npm/sortablejs) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js"></script> <!-- jsDelivr :: Sortable :: Latest (https://www.jsdelivr.com/package/npm/sortablejs) --> <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

 

jQueryの互換性

jQueryプラグインを組み立てるには、次の手順を実行します。

  cd Sortable
  npm install
  grunt jquery

 

今、あなたはjquery.fn.sortable.js :(使用することができます 
分）：あなたがうなり声のjqueryのを実行する場合、またはjquery.fn.sortable.min.jsを

  $("#list").sortable({ /* options */ }); // init

  $("#list").sortable("widget"); // get Sortable instance $("#list").sortable("destroy"); // destroy Sortable instance $("#list").sortable("{method-name}"); // call an instance method $("#list").sortable("{method-name}", "foo", "bar"); // call an instance method with parameters

参考：https://blog.csdn.net/fxss5201/article/details/82528189