jquery sortable_jquery의 드래그 방법 예에 대한 자세한 설명

모든 이벤트 콜백 함수에는 두 개의 매개변수가 있습니다. 이벤트와 ui, 브라우저 자체 이벤트 객체, 그리고 캡슐화된 ui 객체
ui.helper - 정렬 가능한 요소를 나타내는 JQuery 객체, 일반적으로 현재 요소
ui의 복제본입니다. position - 현재 객체를 기준으로 한 마우스의 좌표값 객체 {top,left}를 나타냅니다.
ui.offset - 현재 페이지를 기준으로 한 마우스의 좌표값 객체 {top,left}를 나타냅니다.
ui. item - 현재 드래그된 요소를 나타냅니다.
ui.placeholder - 자리 표시자(정의된 경우)
ui.sender - 현재 드래그된 요소가 속한 정렬 가능한 개체(요소가 다른 정렬 가능한 개체에서 전달된 경우에만) 필요할 때 유용합니다. )

·Parameter(매개변수 이름: 매개변수 유형: 기본값)
appendTo : String : 'parent'
드래그 도중 마우스로 이동하는 도우미가 추가되는 위치를 정의합니다(예: 예, 중복/zIndex 문제 해결)
초기: $('.selector').sortable({appendTo: 'body' })
Get: varappendTo = $('.selector' ). sortable('option', 'appendTo');
설정: $('.selector').sortable('option', 'appendTo', 'body')

axis : String : false
설정하면 요소를 가로 또는 세로로만 드래그할 수 있습니다. 선택 값: 'x', 'y'
초기: $('.selector').sortable({ axis: 'x' })
Get: var axis = $('.selector') . sortable('option', 'axis');
설정: $('.selector').sortable('option', 'axis', 'x')

cancel : 선택기: ' :input,button'
일치하는 요소에 대해 정렬 작업이 발생하는 것을 방지합니다.
초기: $('.selector').sortable({ cancel: 'button' })
Get: var cancel = $('.selector').sortable('option', 'cancel') ;
설정: $('.selector').sortable('option', 'cancel', 'button')

connectWith : Selector : false
정렬 가능한 개체를 연결하도록 허용합니다. 또 다른 정렬 가능한 개체인 경우 항목 요소를 다른 개체로 드래그할 수 있습니다.
초기: $('.selector').sortable({ connectWith: '.otherlist' })
가져오기: var connectWith = $('.selector').sortable('option', 'connectWith' );
설정: $('.selector').sortable('option', 'connectWith', '.otherlist')

containment : Element, String, Selector : false
제약조건 정렬 작업은 지정된 범위 내에서만 발생할 수 있습니다. 선택 값: DOM 객체, 'parent', 'document', 'window' 또는 jQuery 객체
초기: $('.selector').sortable({ containment: 'parent' })
Get: var containment = $('.selector').sortable('option', 'containment')
설정: $('.selector').sortable('option', 'containment', 'parent') ;

cursor : String : 'auto'
정렬 작업을 시작할 때 스타일을 정의합니다.
초기: $('.selector').sortable({ 커서: 'crosshair' })
가져오기: var 커서 = $('.selector').sortable('option', 'cursor') ;
설정: $('.selector').sortable('option', 'cursor', 'crosshair')

cursorAt : Object : false
움직이기 시작할 때의 마우스 위치 특정 위치(최대 두 방향). 선택 값: { 위쪽, 왼쪽, 오른쪽, 아래쪽 }.
초기: $('.selector').sortable({cursorAt: 'top' })
Get: varcursorAt = $('.selector) ').sortable('option', 'cursorAt');
설정: $('.selector').sortable('option', 'cursorAt', 'top')

지연: 정수 : 0
정렬 작업을 활성화하기 전의 지연 시간을 밀리초 단위로 설정합니다. 이 매개변수는 실수로 클릭하는 것을 방지합니다.
초기: $('.selector').sortable({ 지연: 500 })
가져오기: var 지연 = $('.selector').sortable('option', 'delay')
설정: $('.selector').sortable('option', 'delay', 500)

distance : Integer : 1
위로 드래그할 픽셀 수를 결정한 후 요소를 사용하면 정렬 작업이 공식적으로 실행됩니다.
초기: $('.selector').sortable({ distance: 30 });
Get: var distance = $('.selector').sortable('option', 'distance')
설정: $('.selector').sortable('option', 'distance', 30);

dropOnEmpty: Boolean: true
비어 있는 정렬 가능한 개체로 드래그하는 것이 허용되는지 여부.
초기: $('.selector').sortable({ dropOnEmpty: false })
가져오기: var dropOnEmpty = $('.selector').sortable('option', 'dropOnEmpty'); 🎜>설정: $('.selector').sortable('option', 'dropOnEmpty', false)

forceHelperSize : Boolean : false
true인 경우 도우미에 크기가 지정됩니다.
초기: $('.selector').sortable({ forceHelperSize: true })
Get: var forceHelperSize = $('.selector').sortable('option', 'forceHelperSize'); 🎜>설정: $('.selector').sortable('option', 'forceHelperSize', true)

forcePlaceholderSize : Boolean : false
true인 경우 자리 표시자가 크기를 갖도록 합니다.
초기: $('.selector').sortable({ forcePlaceholderSize: true })
가져오기: var forcePlaceholderSize = $('.selector').sortable('option', 'forcePlaceholderSize'); 🎜>설정: $('.selector').sortable('option', 'forcePlaceholderSize', true)

grid : Array : false
정렬된 객체의 항목 요소를 그리드로 처리합니다. . , 각 이동은 하나의 그리드 크기만큼 이동합니다. 배열 값: [x, y]
초기: $('.selector').sortable({grid: [50, 20] }); Grid = $('.selector').sortable('option', 'grid')
설정: $('.selector').sortable('option', 'grid', [50, 20] ) ;

handle : Selector, Element : false
item 요소의 특정 요소에서만 시작하도록 정렬 작업을 제한합니다.
초기: $('.selector').sortable({ handler: 'h2' })
Get: var handler = $('.selector').sortable('option', 'handle') ;
설정: $('.selector').sortable('option', 'handle', 'h2')

helper : String, Function : 'original'
설정 여부 요소를 드래그하면 보조 요소가 표시됩니다. 선택 값: 'original', 'clone'
초기: $('.selector').sortable({ helper: 'clone' })
Get: var helper = $('.selector') . sortable('option', 'helper');
설정: $('.selector').sortable('option', 'helper', 'clone')

items : ' > *'
정렬 개체에서 끌어서 정렬할 수 있는 요소를 지정합니다.
초기: $('.selector').sortable({ 항목: 'li' })
가져오기: var items = $('.selector').sortable('option', 'items') ;
설정: $('.selector').sortable('option', 'items', 'li')

opacity : Float : false
정렬 시 보조 요소 정의( 도우미) 투명도를 표시합니다.
초기: $('.selector').sortable({ 불투명도: 0.6 })
가져오기: var opacity = $('.selector').sortable('option', 'opacity')
설정: $('.selector').sortable('option', 'opacity', 0.6)

placeholderType: StringDefault: false
정렬 작업이 발생할 때 빈 자리 표시자를 설정합니다. CSS 스타일 .
초기: $('.selector').sortable({ placeholder: 'ui-state-highlight' })
가져오기: var placeholder = $('.selector').sortable('option', 'placeholder')
설정: $('.selector').sortable('option', 'placeholder', 'ui-state-highlight')

revert : Boolean : false
true로 설정하면 드래그된 요소가 새 위치로 돌아갈 때 애니메이션 효과가 나타납니다.
초기: $('.selector').sortable({ revert: true })
Get: var revert = $('.selector').sortable('option', 'revert')
설정: $('.selector').sortable('option', 'revert', true)

scroll : Boolean : true
true로 설정하면 요소가 It으로 드래그됩니다. 페이지 가장자리에 도달하면 자동으로 스크롤됩니다.
초기: $('.selector').sortable({ scroll: false })
Get: var scroll = $('.selector').sortable('option', 'scroll')
설정: $('.selector').sortable('option', 'scroll', false)

scrollSensitivity : Integer : 20
요소가 가장자리로 이동하는 픽셀 수를 설정합니다. 페이지 스크롤을 시작합니다.
초기: $('.selector').sortable({ scrollSensitivity: 40 })
Get: var scrollSensitivity = $('.selector').sortable('option', 'scrollSensitivity'); 🎜>설정: $('.selector').sortable('option', 'scrollSensitivity', 40)

scrollSpeed ​​​​: Integer : 20
페이지 스크롤 속도를 설정합니다.
초기: $('.selector').sortable({ scrollSpeed: 40 })
가져오기: var scrollSpeed ​​​​= $('.selector').sortable('option', 'scrollSpeed') ;
설정: $('.selector').sortable('option', 'scrollSpeed', 40)

tolerance : String : 'intersect'
드래그된 요소가 초과하는 정도를 설정합니다. 다른 요소 요소는 재정렬됩니다. 선택 값: '교차', '포인터'
교차: 최소 50% 겹침
포인터: 마우스 포인터가 요소와 겹침
초기: $('.selector').sortable({ 허용오차: '포인터' });
가져오기: var 허용 오차 = $('.selector').sortable('option', 'tolerance')
설정: $('.selector').sortable('option', ' 허용오차', '포인터');

zIndex : Integer : 1000
정렬 작업이 발생할 때 요소의 z-index 값을 설정합니다.
초기: $('.selector').sortable({ zIndex: 5 })
가져오기: var zIndex = $('.selector').sortable('option', 'zIndex'); 🎜>설정: $('.selector').sortable('option', 'zIndex', 5)


·Event

start
시작 이 이벤트는 다음과 같은 경우에 트리거됩니다.
정의: $('.selector').sortable({ start: function(event, ui) { ... } })
바인딩: $('.selector').bind('sortstart ' , function(event, ui) { ... });

sort
이 이벤트는 요소가 정렬될 때 발생합니다.
정의: $('.selector').sortable({ sort: function(event, ui) { ... } })
바인딩: $('.selector').bind('sort ' , function(event, ui) { ... });

change
이 이벤트는 요소가 정렬되고 좌표가 변경되면 트리거됩니다.
정의: $('.selector').sortable({ 변경: function(event, ui) { ... } })
바인딩: $('.selector').bind('sortchange ' , function(event, ui) { ... });

beforeStop
이 이벤트는 정렬 작업이 끝나기 전에 트리거됩니다. 현재 자리표시자 요소와 도우미 요소는 여전히 유효합니다.
정의: $('.selector').sortable({ beforeStop: function(event, ui) { ... } })
바인딩: $('.selector').bind('sortbeforeStop ' , function(event, ui) { ... })

stop
이 이벤트는 정렬 작업이 끝나면 트리거됩니다.
정의: $('.selector').sortable({ stop: function(event, ui) { ... } })
바인딩: $('.selector').bind('sortstop ' , function(event, ui) { ... });

update
이 이벤트는 정렬 작업이 종료되고 요소 좌표가 변경되면 트리거됩니다.
정의: $('.selector').sortable({ 업데이트: function(event, ui) { ... } })
바인딩: $('.selector').bind('sortupdate ' , function(event, ui) { ... });

receive
이 이벤트는 연결된 정렬 가능 객체가 다른 정렬 가능 객체로부터 요소를 수신할 때 트리거됩니다.
정의: $('.selector').sortable({ receive: function(event, ui) { ... } })
바인딩: $('.selector').bind('sortreceive ' , function(event, ui) { ... });

over
이 이벤트는 요소를 다른 정렬 가능한 개체로 드래그하여 이동할 때 트리거됩니다.
정의: $('.selector').sortable({ over: function(event, ui) { ... } })
바인딩: $('.selector').bind('sortover ' , function(event, ui) { ... });

out
이 이벤트는 요소가 정렬 가능한 개체에서 다른 정렬 가능한 개체로 드래그될 때 트리거됩니다.
정의: $('.selector').sortable({ out: function(event, ui) { ... } })
바인딩: $('.selector').bind('sortout ' , function(event, ui) { ... });

activate
연결이 있는 정렬 가능 객체가 정렬 작업을 시작하면 허용된 모든 정렬 가능 항목이 이 이벤트를 트리거합니다.
정의: $('.selector').sortable({ activate: function(event, ui) { ... } })
바인딩: $('.selector').bind('sortactivate ' , function(event, ui) { ... });

deactivate
연결된 정렬 가능 개체가 정렬 작업을 종료하면 허용된 모든 정렬 가능 항목이 이 이벤트를 트리거합니다.
정의: $('.selector').sortable({ deactivate: function(event, ui) { ... } })
바인딩: $('.selector').bind('sortdeactivate ' , function(event, ui) { ... });


·메서드
destory
요소에서 드래그 기능을 제거합니다.
사용법: .sortable( 'destroy' )

disable
요소의 드래그 기능을 비활성화합니다.
사용법: .sortable( 'disable' )

enable
요소의 드래그 기능을 활성화합니다.
사용법: .sortable( 'enable' )

옵션
요소의 매개변수를 가져오거나 설정합니다.
사용법: .sortable( 'option' , optionName , [value] )

직렬화
직렬화 후 각 항목 요소의 id 속성을 가져오거나 설정합니다.
사용법: .sortable( 'serialize' , [options] )

toArray
직렬화 후 각 항목 요소의 id 속성 배열을 가져옵니다.
사용법: .sortable( 'toArray' )

refresh
현재 정렬 가능한 개체의 항목 요소 정렬을 수동으로 새로 고칩니다.
사용법: .sortable( 'refresh' )

refreshPositions
현재 정렬 가능한 개체의 항목 요소 좌표를 수동으로 새로 고치는 방법은 성능을 저하시킬 수 있습니다.
사용법: .sortable( 'refreshPositions' )

취소
현재 정렬 가능한 개체에서 항목 요소의 정렬 변경을 취소합니다.
사용법: .sortable( 'cancel' )


정렬 후 저장하는 방법에는 쿠키, 데이터베이스 구성 파일 등 두 가지가 있습니다.

다음은 데이터베이스 코드의 일부입니다.

코드 복사 코드는 다음과 같습니다. 다음:

$(function() {
var show = $(".loader");
var orderlist = $(".orderlist");
var listleft = $("div [id = 'column_left']");
var listcenter = $("div[id = 'column_center']");
var listright = $("div[id = 'column_right']");
$( ".column" ).sortable({
불투명도: 0.5,//투명도 드래그
되돌리기: true, //버퍼링 효과
커서: '이동', //마우스 드래그 스타일
connectWith: ".column",
//업데이트를 사용하여 시작하고 결과를 두 번 실행합니다. 이는 리소스 낭비입니다. 이제 중지로 변경합니다.
//그러나 중지는 요소가 있는 경우에도 작동합니다. 위치가 변경되지 않았습니다.
//업데이트를 사용하면 다른 js에 문제가 발생합니다. ^_^
stop: function(){
var new_order_left = [] //Left; 열 레이아웃
var new_order_center = [] ;//가운데 열 레이아웃
var new_order_right = [];//오른쪽 열 레이아웃
listleft.children(".portlet").each(function() {
new_order_left.push(this.title) ;
})
listcenter.children(".portlet").each(function() {
new_order_center.push(this.title);
});
listright.children (".portlet").each(function() {
new_order_right.push(this.title);
}) var newleftid = new_order_left.join (',');
var newcenterid = new_order_center.join(',');
var newrightid = new_order_right.join(',')
$.ajax({
유형: " post",
url: jsonUrl, //서버측 핸들러
data: { leftid: newleftid, centerid: newcenterid, rightid:newrightid}, //id: 새 배열에 해당하는 ID, 순서: 원래 배열 order
// beforeSend: function( ) {
// show.html("업데이트 중")
// },
success: function(msg) {
//alert( msg);
show.html ("");
}
})