jQuery UI-드래그 가능한 매개변수 collection_jquery

드래그 가능
라이브러리 파일: ui/ui.core.js, ui/ui.draggable.js
========================= = ==================================
기본값:
$(”#draggable” ) .드래그 가능()
==================================== === ==================
제한 이동(제한된 범위 이동):
$("#draggable").draggable({ 축: ' y' } ); //y축 제한
$(”#draggable2″).draggable({ axis: 'x' }) //x축 제한
$(”#draggable3″ ).draggable({ containment: '#containment-wrapper', scroll: false }); //스크롤 막대가 나타나지 않습니다
$("#draggable4″).draggable({ containment: '#demo-frame' }) ;
$(" #draggable5″).draggable({ containment: 'parent' }); //상위 프레임으로 제한됨
================ ======= ====================================
지연 시작( 지연된 이동):
$("#draggable").draggable({ distance: 20 }); //20픽셀 이동하고 드래그 시작
$("#draggable2″).draggable({ 지연: 1000 } ); //지연 1 초 후에 드래그 시작
================================= ======= ==================
스냅 투(스냅 투):
$(”#draggable”).draggable( { snap: true }); / /기본값, 어떤 방식으로든 흡수
$(”#draggable2″).draggable({ snap: '.ui-widget-header' }) //내부 및 외부를 사용하여 흡착 요소의 직경
$(”#draggable3 ″).draggable({ snap: '.ui-widget-header', snapMode: 'outer' }) //요소의 외부 직경으로 흡착, 흡착 방식: 상부가 하부를 빨아들이고, 하부가 상부를 빨아들입니다. 흡착: 내부, 흡착 방식: 반대
$(”#draggable4″).draggable({ 그리드: [20,20] } );//특정 거리로 이동
$(”#draggable5″).draggable ({grid: [80, 80] })
============= ===============================================
스크롤:
$(”#draggable”).draggable({ 스크롤: true })
$(”#draggable2″).draggable({ 스크롤: true, scrollSensitivity: 100 }); 민감도
$(”#draggable3″).draggable({ 스크롤: true, scrollSpeed: 100 }) //스크롤 속도
================ ======================== =====================
위치 되돌리기 (원래 위치로 복원):
$("#draggable").draggable({ revert: true }); //revert:true 위치로 복원하도록 설정
$(”#draggable2″).draggable( { 되돌리기: true, 도우미: '복제' }); //도우미:'복제' 복사 드래그
======================== ========================= ============
시각피드백(시각효과):
$ ("#draggable").draggable({ helper: 'original' }); // 설정이 복사되지 않습니다(초기화 설정)
$("#draggable2").draggable({ opacity: 0.7, helper: 'clone ' }); //불투명도는 투명도를 설정하고 요소를 복제합니다
$("#draggable3").draggable( {
cursor: 'move', //마우스 그래픽 설정
cursorAt: { top: -12, left: -20 }, //위치 및 위치 좌표 설정
helper: function(event) {
return $('
저는 맞춤 도우미입니다
'); 🎜>} //새 프롬프트 요소를 생성하고 마우스 위치 위치 값을 위에 설정합니다.
})
$(" #set div”).draggable({ stack: { group: '#set div', min: -1 } });//그룹 설정이 드래그되고, 마지막으로 추가된 요소가 그룹 위에 겹쳐져 소원 보드 효과를 만들기에 적합합니다.
============================================= === ============
드래그 핸들(드래그 지점 설정):
$("#draggable").draggable({ handler: 'p' }) / /handle 드래그 위치 설정
$("#draggable2″).draggable({ cancel: “p.ui-widget-header” }) //cancel이 드래그 위치 설정
====== ================================================= ====
커서 스타일(마우스 스타일):
$("#draggable").draggable({cursorAt: {cursor: 'move', top: 56, left: 56 } }) // 커서는 마우스 스타일을 설정하고 위쪽, 왼쪽, 오른쪽 및 아래쪽은 마우스를 기준으로 요소의 위치 지정 지점을 설정합니다.
$("#draggable2").draggable({cursorAt: {cursor: 'crosshair', top : -5, 왼쪽: - 5 } })
$(”#draggable3″).draggable({cursorAt: { 하단: 0 } })
========== ======= ========================================
커서 스타일(마우스 스타일) ：
$(”#draggable”).draggable({cursorAt: {cursor: 'move', top: 56, left: 56 } }) //커서는 마우스 스타일을 설정합니다. 위쪽, 왼쪽, 오른쪽, 아래쪽 설정 마우스를 기준으로 요소의 위치 지정 지점
============================= ================= ===================
드래그 가능 정렬 가능:
$("#sortable ").sortable({
revert: true
}) ;
$("#draggable").draggable({
connectToSortable: '#sortable', //다른 항목에 추가하도록 드래그 설정 목록
helper: 'clone',
revert: 'valid'
});