Sortable เป็นไลบรารี 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
และ put
revertClone: true
sort
อนุญาตการเรียงลำดับภายในรายการ
ตัวอย่าง: https://jsbin.com/jayedig/edit?js,Output
delay
เวลาเป็นมิลลิวินาทีเพื่อกำหนดเมื่อการเรียงลำดับควรเริ่มต้น น่าเสียดายที่เนื่องจากข้อ จำกัด ของเบราว์เซอร์การล่าช้าไม่สามารถทำได้ใน IE หรือ Edge ด้วยการลากและวางดั้งเดิม
ตัวอย่าง: 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 จะยิงเหตุการณ์ทัชโมฆะที่ไม่พึงประสงค์แม้ว่านิ้วของคุณจะไม่เคลื่อนไหว
ตัวเลือกนี้ตั้งค่าการเคลื่อนไหวตัวชี้ขั้นต่ำที่ต้องเกิดขึ้นก่อนที่การเรียงลำดับล่าช้าจะถูกยกเลิก
ค่าระหว่าง 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 แม้ว่าเราจะใช้เบราว์เซอร์ HTML5 สิ่งนี้ทำให้เรามีความเป็นไปได้ที่จะทดสอบพฤติกรรมสำหรับเบราว์เซอร์รุ่นเก่าแม้ในเบราว์เซอร์ใหม่หรือทำให้การลาก 'N Drop รู้สึกสอดคล้องกันมากขึ้นระหว่างเดสก์ท็อป, มือถือและเบราว์เซอร์เก่า
ยิ่งไปกว่านั้นทางเลือกจะสร้างสำเนาขององค์ประกอบ DOM นั้นเสมอและผนวกคลาส fallbackClass
ที่กำหนดไว้ในตัวเลือก พฤติกรรมนี้ควบคุมรูปลักษณ์ขององค์ประกอบ 'ลาก' นี้
การสาธิต: https://jsbin.com/sibiput/edit?html,css,js,Output
fallbackTolerance
เลียนแบบเกณฑ์การลากพื้นเมือง ระบุในพิกเซลว่าเมาส์ควรเคลื่อนที่ไกลแค่ไหนก่อนที่จะถือว่าเป็นการลาก มีประโยชน์หากรายการนั้นสามารถคลิกได้เช่นในรายการลิงก์
เมื่อผู้ใช้คลิกภายในองค์ประกอบที่สามารถจัดเรียงได้ไม่ใช่เรื่องแปลกที่มือของคุณจะย้ายเล็กน้อยระหว่างเวลาที่คุณกดและเวลาที่คุณปล่อย การลากจะเริ่มขึ้นก็ต่อเมื่อคุณย้ายตัวชี้ผ่านความอดทนบางอย่างเพื่อที่คุณจะได้ไม่เริ่มลากทุกครั้งที่คุณคลิก
3 ถึง 5 อาจเป็นค่าที่ดี
dragoverBubble
หากตั้งค่าเป็น true
เหตุการณ์ Dragover จะเป็นฟองเป็นผู้จัดเรียงหลัก ทำงานกับเหตุการณ์ทางเลือกทั้งทางเลือกและพื้นเมือง โดยค่าเริ่มต้นมันเป็นเท็จ แต่สามารถจัดเรียงได้จะหยุดเดือดเหตุการณ์เมื่อองค์ประกอบได้รับการแทรกลงในตัวแม่ที่สามารถจัดเรียงได้หรือ สามารถ แทรกลงในตัวแม่ที่จัดเรียงได้ แต่ไม่ได้อยู่ในช่วงเวลาที่เฉพาะเจาะจง (เนื่องจากภาพเคลื่อนไหว ฯลฯ ) .
ตั้งแต่ 1.8.0 คุณอาจต้องการปล่อยให้ตัวเลือกนี้เป็นเท็จ ก่อน 1.8.0 อาจจำเป็นต้องเป็น true
สำหรับการจัดเรียงแบบซ้อนกันเพื่อทำงาน
removeCloneOnHide
หากตั้งค่าเป็น false
โคลนจะถูกซ่อนไว้โดยให้มันเป็นคุณสมบัติ display
CSS ตั้งค่าเป็น none
โดยค่าเริ่มต้นตัวเลือกนี้เป็น true
ความหมายที่สามารถเรียงลำดับจะลบองค์ประกอบที่โคลนออกจาก DOM เมื่อมันควรจะถูกซ่อนไว้
emptyInsertThreshold
ระยะทาง (เป็นพิกเซล) เมาส์จะต้องมาจากการจัดเรียงที่ว่างเปล่าในขณะที่ลากเพื่อให้องค์ประกอบการลากถูกแทรกลงในแบบเรียงลำดับนั้นได้ ค่าเริ่มต้นถึง 5
ตั้งค่าเป็น 0
เพื่อปิดการใช้งานคุณสมบัตินี้
ตัวอย่าง: https://jsbin.com/becavoj/edit?js,Output
อีกทางเลือกหนึ่งสำหรับตัวเลือกนี้คือการตั้งค่าช่องว่างภายในในรายการของคุณเมื่อว่างเปล่า
ตัวอย่างเช่น:
ul : empty {
padding-bottom : 20 px ;
}
คำเตือน: สำหรับ :empty
ในการทำงานมันจะต้องไม่มีโหนดอยู่ข้างใน (แม้แต่ข้อความหนึ่ง)
ตัวอย่าง: https://jsbin.com/yunakeg/edit?html,css,js,Output
HTMLElement
- รายการซึ่งเป็นองค์ประกอบที่ย้ายHTMLElement
- รายการก่อนหน้าHTMLElement
- องค์ประกอบลากHTMLElement
Number|undefined
- ดัชนีเก่าภายในพาเรนต์Number|undefined
- ดัชนีใหม่ภายในพาเรนต์Number|undefined
- ดัชนีเก่าภายในพาเรนNumber|undefined
- ดัชนีใหม่ภายใน ParentString|Boolean|undefined
- Pull Mode หากลากไปยังอื่นที่สามารถจัดเรียงได้ ( "clone"
, true
หรือ false
) มิฉะนั้น undefined move
วัตถุเหตุการณ์HTMLElement
HTMLElement
HTMLElement
DOMRect
HTMLElement
- องค์ประกอบที่มีแนวทางDOMRect
Boolean
- true
ถ้าองค์ประกอบจะถูกแทรกหลังจากเป้าหมาย (หรือ false
ถ้าก่อน)String
[, ค่า: *
]): *
รับหรือตั้งค่าตัวเลือก
HTMLElement
[, SELECTOR: String
]): HTMLElement|null
สำหรับแต่ละองค์ประกอบในชุดรับองค์ประกอบแรกที่ตรงกับตัวเลือกโดยการทดสอบองค์ประกอบของตัวเองและข้ามผ่านบรรพบุรุษของมันในต้นไม้ DOM
String[]
Serializes 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
[, ตัวเลือก: 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
, SELECTOR :String
) :Boolean
- ตรวจสอบชุดองค์ประกอบที่จับคู่ปัจจุบันกับตัวเลือก:HTMLElement
, SELECTOR :String
[, CTX :HTMLElement
]) :HTMLElement|Null
- สำหรับแต่ละองค์ประกอบในชุดรับองค์ประกอบแรกที่ตรงกับตัวเลือกโดยการทดสอบองค์ประกอบเอง ต้นไม้:HTMLElement
) :HTMLElement
- สร้างสำเนาลึกของชุดองค์ประกอบที่ตรงกัน:HTMLElement
, ชื่อ :String
, สถานะ :Boolean
) - เพิ่มหรือลบหนึ่งคลาสจากแต่ละองค์ประกอบ:HTMLElement
) :String
- ตรวจจับทิศทางขององค์ประกอบโดยอัตโนมัติว่า 'vertical'
หรือ 'horizontal'
โดยอัตโนมัติ:HTMLElement
, SELECTOR :String
) :Number
- ดัชนีขององค์ประกอบภายในพาเรนต์สำหรับชุดองค์ประกอบที่เลือก:HTMLElement
, ChildNum :Number
, ตัวเลือก :Object
, ANDIGEDRAGEL :Boolean
): HTMLElement
:String
- Expando ชื่อคุณสมบัติสำหรับการใช้งานภายใน <!-- jsDelivr :: Sortable :: Latest (https://www.jsdelivr.com/package/npm/sortablejs) -->
< script src =" https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js " > </ script >
กรุณาอ่านสิ่งนี้
โครงการนี้มีอยู่ขอบคุณทุกคนที่มีส่วนร่วม [มีส่วนช่วย].
เป็นผู้สนับสนุนทางการเงินและช่วยให้เราสนับสนุนชุมชนของเรา [มีส่วนช่วย]
สนับสนุนโครงการนี้กับองค์กรของคุณ โลโก้ของคุณจะปรากฏขึ้นที่นี่พร้อมลิงค์ไปยังเว็บไซต์ของคุณ [มีส่วนช่วย]
ได้รับอนุญาตโดยไม่เสียค่าใช้จ่ายสำหรับบุคคลใด ๆ ที่ได้รับสำเนาซอฟต์แวร์นี้และไฟล์เอกสารที่เกี่ยวข้อง ("ซอฟต์แวร์") เพื่อจัดการในซอฟต์แวร์โดยไม่มีการ จำกัด รวมถึง แต่ไม่ จำกัด เฉพาะสิทธิ์ในการใช้คัดลอกแก้ไขผสาน เผยแพร่แจกจ่าย sublicense และ/หรือขายสำเนาของซอฟต์แวร์และอนุญาตให้บุคคลที่ซอฟต์แวร์ได้รับการตกแต่งให้ทำเช่นนั้นภายใต้เงื่อนไขดังต่อไปนี้:
ประกาศลิขสิทธิ์ข้างต้นและประกาศการอนุญาตนี้จะรวมอยู่ในสำเนาทั้งหมดหรือส่วนสำคัญของซอฟต์แวร์
ซอฟต์แวร์มีให้ "ตามสภาพ" โดยไม่มีการรับประกันใด ๆ ไม่ว่าโดยชัดแจ้งหรือโดยนัยรวมถึง แต่ไม่ จำกัด เฉพาะการรับประกันความสามารถในการค้าการออกกำลังกายสำหรับวัตถุประสงค์เฉพาะและการไม่เข้าร่วม ไม่ว่าในกรณีใดผู้เขียนหรือผู้ถือลิขสิทธิ์จะต้องรับผิดชอบต่อการเรียกร้องความเสียหายหรือความรับผิดอื่น ๆ ไม่ว่าจะเป็นการกระทำของสัญญาการละเมิดหรืออื่น ๆ ซอฟต์แวร์.