Sortable
v1.15.3
Sortable은 재주문 가능한 드래그 앤 드롭 목록을위한 JavaScript 라이브러리입니다.
데모 : http://sortablejs.github.io/sortable/
@types/sortablejs 의 TypeScript 정의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 플러그인 :
// 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/hoquox/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 추가합니다. 이 동작은이 '드래그 된'요소의 모양을 제어합니다.
데모 : https://jsbin.com/sibiput/edit?html,css,js,output
fallbackTolerance 옵션기본 드래그 임계 값을 모방합니다. 마우스가 드래그로 간주되기 전에 마우스가 얼마나 멀리 이동 해야하는지 픽셀로 지정하십시오. 링크 목록에서와 같이 항목을 클릭 할 수있는 경우 유용합니다.
사용자가 정렬 가능한 요소를 클릭하면 손이 누르는 시간과 출시 시간 사이에 약간 움직이는 것은 드문 일이 아닙니다. 드래그는 특정 공차를지나 포인터를 이동하는 경우에만 시작되므로 클릭 할 때마다 실수로 드래그를 시작하지 않도록합니다.
3 ~ 5는 아마도 좋은 가치 일 것입니다.
dragoverBubble 옵션 true 로 설정되면 Dragover 이벤트는 부모 Sortables로 거품됩니다. 폴백 및 기본 드래그 오버 이벤트에서 작동합니다. 기본적으로 거짓이지만 정렬 가능은 요소가 부모 정렬 가능한 부모에 삽입되거나 부모 분류 가능에 삽입 될 수 있지만 해당 특정 시간 (애니메이션으로 인해)이 아닙니다. .
1.8.0 이후 로이 옵션을 False로 남겨두고 싶을 것입니다. 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 , 또는 false )으로 드래그하는 경우 Pull Mode, 그렇지 않으면 정의되지 않았습니다. moveHTMLElementHTMLElementHTMLElementDOMRectHTMLElement - 안내 된 요소DOMRectBoolean - true target 이후에 요소가 삽입되면 (또는 이전에 false )String [, value : * ]) : *옵션을 얻거나 설정하십시오.
HTMLElement [, selector : String ]) : HTMLElement|null세트의 각 요소에 대해 요소 자체를 테스트하고 Dom Tree의 조상을 통과하여 선택기와 일치하는 첫 번째 요소를 가져옵니다.
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 [, 옵션 : Object ]) : Sortable새 인스턴스를 만듭니다.
Sortable활성 정렬 가능한 인스턴스.
HTMLElement드래그되는 요소.
HTMLElement유령 요소.
HTMLElement복제 요소.
HTMLElement ) : Sortable요소에서 정렬 가능한 인스턴스를 가져옵니다.
...SortablePlugin|SortablePlugin[] )플러그인을 정렬 할 수 있도록 마운트합니다.
:HTMLElement , event :String , fn :Function ) - 이벤트 핸들러 기능 첨부:HTMLElement , 이벤트 :String , FN :Function ) - 이벤트 핸들러 제거:HTMLElement ) :Object - 모든 CSS 속성의 값을 얻으십시오.:HTMLElement , prop :String ) :Mixed - 스타일 속성의 가치 얻기:HTMLElement , prop :String , value :String ) - 하나의 CSS 속성을 설정:HTMLElement , props :Object ) - 더 많은 CSS 속성 설정:HTMLElement , tagname :String [, iterator :Function ]) :Array - 태그 이름으로 요소 가져옵니다.:Mixed , fn :Function ) :Function - 함수를 취하고 항상 특정 컨텍스트를 갖는 새로운 기능을 반환합니다.:HTMLElement , selector :String ) :Boolean - 선택기에 대한 현재 일치하는 요소 세트를 확인하십시오.:HTMLElement , selector :String [, ctx :HTMLElement ])) :HTMLElement|Null - 세트의 각 요소에 대해 요소 자체를 테스트하고 DOM의 조상을 통과하여 선택기와 일치하는 첫 번째 요소를 가져옵니다. 나무:HTMLElement ) :HTMLElement - 일치하는 요소 세트의 깊은 사본을 만듭니다.:HTMLElement , 이름 :String , State :Boolean ) - 각 요소에서 하나의 클래스를 추가하거나 제거하십시오.:HTMLElement ) :String - 요소의 방향을 'vertical' 또는 'horizontal' 으로 자동 감지합니다.:HTMLElement , selector :String ) :Number - 선택한 요소 세트에 대한 부모 내 요소의 색인:HTMLElement , childnum :Number , 옵션 :Object , 포함 :Boolean ) : HTMLElement - 정렬 가능한 인스턴스 내에서 주어진 드래그 가능한 요소 색인에서 드래그 가능한 요소를 얻으십시오.:String - 내부 사용의 Expando 속성 이름, SortableListelement [Expando] Elemenet의 정렬 가능한 인스턴스를 반환합니다. <!-- jsDelivr :: Sortable :: Latest (https://www.jsdelivr.com/package/npm/sortablejs) -->
< script src =" https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js " > </ script >제발, 이것을 읽으십시오.
이 프로젝트는 기부 한 모든 사람들 덕분에 존재합니다. [기여하다].
재정적 기고자가되어 지역 사회를 유지하도록 도와줍니다. [기여하다]
조직과 함께이 프로젝트를 지원하십시오. 귀하의 로고는 귀하의 웹 사이트 링크와 함께 여기에 표시됩니다. [기여하다]
이에 따라이 소프트웨어 및 관련 문서 파일 ( "소프트웨어")의 사본을 얻는 사람에게 허가는 제한없이 소프트웨어를 처리 할 수있는 사람에게 무료로 제공됩니다. , 소프트웨어의 사본을 게시, 배포, 서브 리센스 및/또는 판매하고, 소프트웨어가 제공하도록하는 사람을 다음과 같은 조건에 따라 할 수 있도록합니다.
위의 저작권 통지 및이 권한 통지는 소프트웨어의 모든 사본 또는 상당 부분에 포함되어야합니다.
이 소프트웨어는 상업성, 특정 목적에 대한 적합성 및 비 침해에 대한 보증을 포함하여 명시 적 또는 묵시적 보증없이 "그대로"제공됩니다. 어떠한 경우에도 저자 또는 저작권 보유자는 계약, 불법 행위 또는 기타, 소프트웨어 또는 사용 또는 기타 거래와 관련하여 계약, 불법 행위 또는 기타의 행동에 관계없이 청구, 손해 또는 기타 책임에 대해 책임을지지 않아야합니다. 소프트웨어.
