Sortable
v1.15.3
Fortable هي مكتبة JavaScript لقوائم السحب والإفلات القابلة للترتيب.
العرض التوضيحي: http://sortablejs.github.io/sortable/
@types/sortablejsالتثبيت مع NPM:
npm install sortablejs --saveالتثبيت مع Bower:
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:
// 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 s.
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 - إعادة العنصر المستنسخ إلى الموضع الأولي بعد الانتقال إلى قائمة أخرى.العرض التوضيحي:
pull putrevertClone: 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. هذا يمنحنا إمكانية اختبار سلوك المتصفحات القديمة حتى في المتصفح الأحدث ، أو جعل Drag 'N Drop يشعر بمزيد من الاتساق بين سطح المكتب والهاتف المحمول والمستعرضات القديمة.
علاوة على ذلك ، فإن الاحتياطي الذي يولد دائمًا نسخة من عنصر DOM ويؤدي إلى إلحاق fallbackClass المحددة في الخيارات. يتحكم هذا السلوك في مظهر عنصر "السحب".
Demo: https://jsbin.com/sibiput/edit؟html،css،js،output
fallbackToleranceيحاكي عتبة السحب الأصلية. حدد في وحدات البكسل إلى أي مدى يجب أن يتحرك الماوس قبل أن يعتبر سحبًا. مفيد إذا كانت العناصر قابلة للنقر كما في قائمة الروابط.
عندما ينقر المستخدم داخل عنصر قابل للفرز ، ليس من غير المألوف أن تتحرك يدك قليلاً بين الوقت الذي تضغط فيه والوقت الذي تطلقه. يبدأ سحب فقط إذا قمت بنقل المؤشر بعد تسامح معين ، بحيث لا تبدأ عن طريق الخطأ في السحب في كل مرة تنقر فيها.
من 3 إلى 5 على الأرجح قيم جيدة.
dragoverBubble إذا تم ضبطه على true ، فإن حدث Dragover سيخفق إلى Parent Sortables. يعمل على كل من الحدث الاحتياطي وحدث Dragover الأصلي. بشكل افتراضي ، يكون هذا خطأ ، لكن القابل للفرز لن يتوقف عن حدوث الحدث بمجرد إدراج العنصر في أحد الوالدين القابل للفرز ، أو يمكن إدراجه في أحد الوالدين القابل للفرز ، ولكنه ليس في ذلك الوقت المحدد (بسبب الرسوم المتحركة ، إلخ) .
منذ 1.8.0 ، ربما ترغب في ترك هذا الخيار كاذبة. قبل 1.8.0 ، قد يكون من true أن تعمل Sortables المتداخلة.
removeCloneOnHide إذا تم ضبطها على false ، يتم إخفاء الاستنساخ من خلال وضع خاصية display CSS على none . بشكل افتراضي ، يكون هذا الخيار true ، مما يعني أن الفرز سيؤدي إلى إزالة العنصر المستنسخ من DOM عندما من المفترض أن يكون مخفيًا.
emptyInsertThreshold المسافة (بالبكسل) يجب أن تكون الماوس من فرز فارغ أثناء السحب حتى يتم إدراج عنصر السحب في هذا القابل للفرز. الافتراضات إلى 5 . ضبط على 0 لتعطيل هذه الميزة.
العرض التوضيحي: https://jsbin.com/becavoj/edit؟js،output
يتمثل بديل لهذا الخيار في تعيين حشوة في قائمتك عندما تكون فارغة.
على سبيل المثال:
ul : empty {
padding-bottom : 20 px ;
} تحذير: من أجل :empty للعمل ، يجب ألا يكون لها عقدة في الداخل (حتى رسالة نصية واحدة).
Demo: 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 ، أو false ) ، غير محدد خلاف ذلك move كائن الحدثHTMLElementHTMLElementHTMLElementDOMRectHTMLElement - العنصر الذي وجهت إليهDOMRectBoolean - true إذا سيتم إدراج عنصر بعد الهدف (أو false إذا كان من قبل)String [، القيمة: * ]): *الحصول على أو تعيين الخيار.
HTMLElement [، محدد: String ]): HTMLElement|nullلكل عنصر في المجموعة ، احصل على العنصر الأول الذي يطابق المحدد من خلال اختبار العنصر نفسه وتجاوز أسلافه في شجرة DOM.
String[] يقوم بتسلسل 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 [، الخيارات: Object ]): Sortableإنشاء مثيل جديد.
Sortable قابل للفرزمثيل فرز نشط.
HTMLElementالعنصر يجري سحبه.
HTMLElementعنصر الشبح.
HTMLElementعنصر استنساخ.
HTMLElement ): Sortableاحصل على مثيل قابل للفرز على عنصر.
...SortablePlugin|SortablePlugin[] )يتصاعد المكون الإضافي لفرز.
:HTMLElement ، الحدث :String ، fn :Function ) - إرفاق وظيفة معالج الأحداث:HTMLElement ، الحدث :String ، FN :Function ) - إزالة معالج الأحداث:HTMLElement ) :Object - احصل على قيم جميع خصائص CSS:HTMLElement ، Prop :String ) :Mixed - احصل على قيمة خصائص النمط:HTMLElement ، Prop :String ، Value :String ) - تعيين خصائص CSS واحدة:HTMLElement ، الدعائم :Object ) - تعيين المزيد من خصائص CSS:HTMLElement ، tagname :String [، iterator :Function ]) :Array - احصل على عناصر حسب اسم العلامة:Mixed ، FN :Function ) :Function - تأخذ وظيفة وإرجاع سياق جديد سيكون له دائمًا سياق معين:HTMLElement ، المحدد :String ) :Boolean - تحقق من مجموعة العناصر المتطابقة الحالية ضد المحدد:HTMLElement ، المحدد :String [، CTX :HTMLElement ]) :HTMLElement|Null - لكل عنصر في المجموعة ، احصل على العنصر الأول الذي يطابق المحدد عن طريق اختبار العنصر نفسه والتمرير عبر أسلافه في دوم شجرة:HTMLElement ) :HTMLElement - قم بإنشاء نسخة عميقة من مجموعة العناصر المتطابقة:HTMLElement ، الاسم :String ، الحالة :Boolean ) - إضافة أو إزالة فئة واحدة من كل عنصر:HTMLElement ) :String - اكتشف تلقائيًا اتجاه العنصر إما 'vertical' أو 'horizontal':HTMLElement ، المحدد :String ) :Number - فهرس العنصر داخل الوالد لمجموعة محددة من العناصر:HTMLElement ، childnum :Number ، الخيارات :Object ، مضمن :Boolean ): HTMLElement - احصل:String - expenso اسم خاصية للاستخدام الداخلي ، يقوم SortaBliStelement <!-- jsDelivr :: Sortable :: Latest (https://www.jsdelivr.com/package/npm/sortablejs) -->
< script src =" https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js " > </ script >من فضلك ، اقرأ هذا.
هذا المشروع موجود بفضل جميع الأشخاص الذين يساهمون. [يساهم].
كن مساهمًا ماليًا وساعدنا في الحفاظ على مجتمعنا. [يساهم]
دعم هذا المشروع مع مؤسستك. سيظهر شعارك هنا مع رابط لموقع الويب الخاص بك. [يساهم]
يتم منح الإذن بموجب هذا ، مجانًا ، لأي شخص يحصل على نسخة من هذا البرنامج وملفات الوثائق المرتبطة ("البرنامج") ، للتعامل في البرنامج دون تقييد ، بما في ذلك على سبيل المثال لا الحصر حقوق استخدام ، نسخ ، تعديل ، دمج أو نشر نسخ وتوزيعها و/أو بيعها و/أو بيع نسخ من البرامج ، والسماح للأشخاص الذين يتم تقديم البرنامج لهم للقيام بذلك ، مع مراعاة الشروط التالية:
يجب إدراج إشعار حقوق الطبع والنشر أعلاه وإشعار الإذن هذا في جميع النسخ أو الأجزاء الكبيرة من البرنامج.
يتم توفير البرنامج "كما هو" ، دون أي ضمان من أي نوع ، صريح أو ضمني ، بما في ذلك على سبيل المثال لا الحصر ضمانات القابلية للتسويق واللياقة لغرض معين وعدم الانفجار. لا يجوز بأي حال من الأحوال أن يتحمل المؤلفون أو حاملي حقوق الطبع والنشر مسؤولية أي مطالبة أو أضرار أو مسؤولية أخرى ، سواء في إجراء عقد أو أضرار أو غير ذلك ، ناشئة عن البرامج أو خارجها أو الاستخدام أو غيرها برمجة.
