jquery sortable 예제
jQueryUI는 마우스를 사용하여 목록 또는 그리드의 요소를 재정렬하는 정렬 가능() 메서드를 제공합니다. 이 메서드는 첫 번째 매개 변수로 전달 된 작업 문자열을 기반으로 정렬 성 작업을 수행 합니다. 참고: serialize가 빈 문자열을 반환하는 경우 id 특성에 밑줄이 포함되어 있는지 확인합니다. 예를 들어 id 속성 “foo_1”, “foo_5”, “foo_2″가 있는 3개의 요소 목록은 “foo[]]=1&foo[=5&foo[=5&foo]==2″로 직렬화됩니다. 밑줄, 등가또는 하이픈을 사용하여 세트와 숫자를 구분할 수 있습니다. 예를 들어 “foo=1”, “foo-1”, “foo_1″은 모두 “foo[]=1″로 직렬화됩니다. 다음 표에서는 정렬 가능한 위젯에 사용되는 몇 가지 메서드를 보여 주며 jquery-sortable.js는 정렬 가능한 인스턴스 개체를 검색하는 다음 브라우저에서 테스트되었습니다. 요소에 연결된 인스턴스가 없는 경우 정의되지 않은 인스턴스가 반환됩니다. 다른 위젯 방법과 달리 instance()는 정렬 가능한 플러그인이 로드된 후 모든 요소를 호출해도 안전합니다. jquery-sortable.js는 수정된 BSD 라이선스에 따라 릴리스됩니다. 다음 예제에서는 connectWith 및 dropOnEmpty 옵션의 사용을 보여 주며: 정렬 가능한 항목이 정렬 가능한 목록에서 멀리 이동될 때 이 이벤트가 트리거됩니다. 초기화 후 ui 정렬 가능한 클래스에 대한 테마를 읽고 변경한 클래스 옵션의 속성을 얻거나 설정합니다.
정렬 가능한 특정 스타일지정이 필요한 경우 다음 CSS 클래스 이름을 재정의를 위해 사용하거나 클래스 옵션의 키로 사용할 수 있습니다. 이렇게 하면 한 목록의 항목을 다른 목록으로 이동할 수 있으며, 이는 빈번하고 유용한 사용자 상호 작용을 허용합니다. 생략된 경우 다른 요소가 연결되지 않습니다. 이것은 단방향 관계입니다. 기본적으로 해당 값은 false입니다. 항목 옵션을 사용하여 요소 내부의 항목을 정렬할 수 있는지 지정합니다. 정렬 가능한 메서드는 다음 형식에서 사용할 수 있습니다: 지정된 클래스 옵션으로 정렬 가능한 초기화, ui 정렬 가능한 클래스에 대 한 테마 변경: 정렬 가능한 항목 이 드래그 하는 동안 제한 되는 경계 상자를 정의 합니다. 지정된 옵션과 연결된 정렬 가능한 옵션의 값을 설정Name입니다.
다음 예제에서는 간단한 정렬 가능한 기술을 보여 줍니다. 요소를 클릭하고 목록 내의 새 지점으로 드래그하면 다른 항목이 맞게 조정됩니다. 기본적으로 정렬 가능한 항목은 끌어서 있는 속성을 공유합니다. 정렬 가능() 메서드는 유효한 컨테이너에서 호출되어야 합니다. Muuri는 반응형, 정렬 가능, 필터링 가능 및 드래그 가능한 그리드 레이아웃을 만듭니다. 예, 그것은 하나의 라이브러리에서 많은 기능, 하지만 우리는 가능한 한 작은 만들기 위해 노력 했습니다. 거기 밖으로 무엇에 비해 무리는 Packery의 조합, 벽돌, 동위 원소와 jQuery UI 정렬. 핸들 옵션을 사용하여 핸들을 사용하여 정렬 가능한 목록을 만들 수 있습니다: StickySort는 테이블에 스티커 헤더와 열을 만드는 jQuery 플러그인으로 정렬 가능한 기능을 추가할 수 있습니다.
이 플러그인은 사용자가 많은 경우에 뷰포트의 전체 높이를 채우는 큰 테이블에서 자신을 지향하는 스티커 헤더를 만들어야하는 직장에서의 최근 작업에서 영감을 받았습니다. 주: 포함에 대해 지정된 요소에는 계산된 너비와 높이가 있어야 합니다(명시적필요는 아님). 예를 들어 float: 왼쪽 정렬 가능한 자식 및 포함을 지정하는 경우 : “parent”는 float가 있어야합니다: 정렬 가능한/상위 컨테이너에 남아 있거나 높이가 0이 되어 정의되지 않은 동작이 발생합니다.
