jquery.ui.draggable中国語ドキュメント
17293 ワード
[ ]
JQuery UI Draggable .
Draggable css: ui-draggable, css: ui-draggable-dragging.
, , JQuery UI Droppable , draggable .
(start, stop, drag ) :
event:
ui: JQuery ui ,
ui.helper: JQuery , ui.helper.context DOM .
ui.position: ui.helper( ) ( , , body) , {top, left}---- ui.position.top top
ui.offset: ui.position , ( , , html body . html body , offset .)
[ ]
addClasses:
[ ]Boolean( )
[ ]true
[ ]
draggable ui-draggable . .draggable() ( ) , , , ui-draggable-dragging .
true ui-draggable .
false ui-draggable .
[ ]draggable , , , , .
[ ]
$('.selector').draggable({ addClasses: false });
.selector , ui-draggable
[ ]
var addClasses = $('#draggable').draggable('option', 'addClasses');
.selector addClasses .
[ ]
$('.selector').draggable('option', 'addClasses', false);
.selector addClasses false.
appendTo:
[ ]Element, Selector(HTML )
[ ]'parent'
[ ]
ui.helper , , ui.helper draggable , .
[ ]
[ ]
$('.selector').draggable({ appendTo: 'body' });
[ ]
//getter
var appendTo = $('.selector').draggable('option', 'appendTo');
[ ]
//setter
$('.selector').draggable('option', 'appendTo', 'body');.
axis:
[ ]String, Boolean( 'x', 'y', false)
'x':
'y':
false: , .
[ ]false,
[ ]
.
[ ]
[ ]
$('.selector').draggable({ axis: 'x' });
[ ]
var axis = $('.selector').draggable('option', 'axis');
[ ]
$('.selector').draggable('option', 'axis', 'x');
cancel:
[ ]
[ ]':input, option'
[ ]
draggable .
[ ]
[ ]
$('.selector').draggable({ cancel: 'button' });
[ ]
var cancel = $('.selector').draggable('option', 'cancel');
[ ]
$('.selector').draggable('option', 'cancel', 'button');
connectToSortable: sortable , .
[ ]
[ ]':input, option'
[ ]
draggable .
[ ]
[ ]
$('.selector').draggable({ cancel: 'button' });
[ ]
var cancel = $('.selector').draggable('option', 'cancel');
[ ]
$('.selector').draggable('option', 'cancel', 'button');
containment:
[ ] , , , .
:
:
:
parent:
document: html document , ,
widow: , , ...
: [x1, y1, x2, y2] [ , , , ] , . , .
false:
[ ]false
[ ]
.
[ ]
[ ]
$('.selector').draggable({ containment: 'parent' });
[ ]
var containment = $('.selector').draggable('option', 'containment');
[ ]
$('.selector').draggable('option', 'containment', 'parent');
cursor:
[ ] .
[ ]'auto'
[ ]
, , cursor , , cursor . , $('input[type=button]').draggable({ cursor: 'crosshair' }); button crosshair , , .
[ ]
[ ]
$('.selector').draggable({ cursor: 'crosshair' });
[ ]
var cursor = $('.selector').draggable('option', 'cursor');
[ ]
$('.selector').draggable('option', 'cursor', 'crosshair');
cursorAt:
[ ]
top, left, right, bottom .
[ ]false
[ ]
, , false( ) , , , , , : $('.selector').draggable('option', 'cursorAt', {left: 8, top: 8}); , 8 .
[ ]
[ ]
$('.selector').draggable({ cursor: 'crosshair' });
[ ]
var cursor = $('.selector').draggable('option', 'cursor');
[ ]
$('.selector').draggable('option', 'cursor', 'crosshair');
delay:
[ ] ,
[ ]0
[ ]
, . . : , , delay , , , , .
[ ]
[ ]
$('.selector').draggable({ delay: 500 });
[ ]
var delay = $('.selector').draggable('option', 'delay');
[ ]
$('.selector').draggable('option', 'delay', 500);
distance:
[ ] ,
[ ]1
[ ]
, . . : , , distance , .
[ ]
[ ]
$('.selector').draggable({ distance: 30 });
[ ]
var distance = $('.selector').draggable('option', 'distance');
[ ]
$('.selector').draggable('option', 'distance', 30);
grid:
[ ] [x, y], x , y ,
[ ]false
[ ]
grid , guid .
[ ]
[ ]
$('.selector').draggable({ grid: [50, 20] });
[ ]
var grid = $('.selector').draggable('option', 'grid');
[ ]
$('.selector').draggable('option', 'grid', [50, 20]);
handle:
[ ]
[ ]false
[ ]
. : id=window div , handle div id=title span, , id=title span . : .
[ ]
[ ]
$('.selector').draggable({ handle: 'h2' });
[ ]
var handle = $('.selector').draggable('option', 'handle');
[ ]
$('.selector').draggable('option', 'handle', 'h2');
helper:
[ ]
:
'original':
'clone': ,
DOM : DOM .
[ ]'original'
[ ]
.
[ ]
[ ]
$('.selector').draggable({ helper: 'clone' });
[ ]
var helper = $('.selector').draggable('option', 'helper');
[ ]
$('.selector').draggable('option', 'helper', 'clone');
iframeFix:
[ ] , iframe
[ ]false
[ ]
iframe , iframe .
true, iframe mousemove , , iframe mousemove .
[ ]
[ ]
$('.selector').draggable({ iframeFix: true });
[ ]
var iframeFix = $('.selector').draggable('option', 'iframeFix');
[ ]
$('.selector').draggable('option', 'iframeFix', true);
opacity:
[ ]
[ ]false
[ ]
helper( ) .
[ ]
[ ]
$('.selector').draggable({ opacity: 0.35 });
[ ]
var opacity = $('.selector').draggable('option', 'opacity');
[ ]
$('.selector').draggable('option', 'opacity', 0.35);
refreshPositions:
[ ]Boolean
[ ]false
[ ]
true, droppable mousemove .
: . .
[ ]
[ ]
$('.selector').draggable({ refreshPositions: true });
[ ]
var refreshPositions = $('.selector').draggable('option', 'refreshPositions');
[ ]
$('.selector').draggable('option', 'refreshPositions', true);
revert:
[ ]Boolean,
[ ]false
[ ]
.
true: ,
'invalid': droppable drop( ) , .
'valid': invalid .
[ ]
[ ]
$('.selector').draggable({ revert: true });
[ ]
var revert = $('.selector').draggable('option', 'revert');
[ ]
$('.selector').draggable('option', 'revert', true);
revertDuration:
[ ]
[ ]500
[ ]
revert( ) , . revert false, .
[ ]
[ ]
$('.selector').draggable({ revertDuration: 1000 });
[ ]
var revertDuration = $('.selector').draggable('option', 'revertDuration');
[ ]
$('.selector').draggable('option', 'revertDuration', 1000);
scope:
[ ]
[ ]'default'
[ ]
, droppable , droppable accept draggable , , drggable scope , scope draggable droppable .
:
$('#draggable_a').draggable({scope: 'a'});
$('#draggable_b').draggable({scope: 'b'});
$('#droppable_a').droppable({scope: 'a'});
$('#droppable_b').droppable({scope: 'b'});
droppable accept '*', draggable_a, draggable_b droppable_a droppable_b , , scope , draggable_a droppable_a, draggable_b droppable_b .
: . 'default', , scope , default .
[ ]
[ ]
$('.selector').draggable({ scope: 'tasks' });
[ ]
var scope = $('.selector').draggable('option', 'scope');
[ ]
$('.selector').draggable('option', 'scope', 'tasks');
scroll:
[ ]Boolean
[ ]true
[ ]
true, ,
[ ]
[ ]
$('.selector').draggable({ scroll: false });
[ ]
var scope = $('.selector').draggable('option', 'scope');
[ ]
$('.selector').draggable('option', 'scroll', false);
scrollSensitivity:
[ ]
[ ]20
[ ]
.
draggable , .
draggable , .
[ ]
[ ]
$('.selector').draggable({ scrollSensitivity: 40 });
[ ]
var scrollSensitivity = $('.selector').draggable('option', 'scrollSensitivity');
[ ]
$('.selector').draggable('option', 'scrollSensitivity', 40);
scrollSpeed:
[ ]
[ ]20
[ ]
scrollSensitivity , .
[ ]
[ ]
$('.selector').draggable({ scrollSpeed: 40 });
[ ]
var scrollSpeed = $('.selector').draggable('option', 'scrollSpeed');
[ ]
$('.selector').draggable('option', 'scrollSpeed', 40);
snap:
[ ]Boolean,
[ ]false
[ ]
, true .ui-draggable, , draggable , , , .
[ ]
[ ]
$('.selector').draggable({ snap: true });
[ ]
var snap = $('.selector').draggable('option', 'snap');
[ ]
$('.selector').draggable('option', 'snap', true);
snapMode:
[ ] ,
'inner':
'outer':
'both': .
[ ]'both'
[ ]
.
[ ]
[ ]
$('.selector').draggable({ snapMode: 'outer' });
[ ]
var snapMode = $('.selector').draggable('option', 'snapMode');
[ ]
$('.selector').draggable('option', 'snapMode', 'outer');
snapTolerance:
[ ]
[ ]20
[ ]
, .
[ ]
[ ]
$('.selector').draggable({ snap: true });
[ ]
var snap = $('.selector').draggable('option', 'snap');
[ ]
$('.selector').draggable('option', 'snap', true);
stack:
[ ] {group: '.selector', min: 50}
[ ]false
[ ]
draggable , draggable , , , draggable , min z-index .
[ ]
[ ]
$('.selector').draggable({ stack: { group: 'products', min: 50 } });
[ ]
var stack = $('.selector').draggable('option', 'stack');
[ ]
$('.selector').draggable('option', 'stack', { group: 'products', min: 50 });
zIndex:
[ ]
[ ]false
[ ]
helper( ) z-index . z-index css , , .
[ ]
[ ]
$('.selector').draggable({ zIndex: 2700 });
[ ]
var zIndex = $('.selector').draggable('option', 'zIndex');
[ ]
$('.selector').draggable('option', 'zIndex', 2700);
[ ]
start: , , .
[ ]dragstart
[ ]
event: .
ui: JQuery ui
this: DOM
drag: .
[ ]drag
[ ]
event: .
ui: JQuery ui
this: DOM
stop: .
[ ]dragstop
[ ]
event: .
ui: JQuery ui
this: DOM
[ ]
.
$('.selector').draggable({
start: function(event, ui) { alert(this); },
drag: function(event, ui) { alert(this); },
stop: function(event, ui) { alert(this); }
});
. , .
$(".selector").bind('dragstart', function(event, ui) {
alert(this);
});
$(".selector").bind('drag', function(event, ui) {
alert(this);
});
$(".selector").bind('dragstop', function(event, ui) {
alert(this);
});
[ ]
destroy: , .
[ ]
$(".selector").progressbar('destroy');
.selector , .
disable: , enable .
enable: , disable .
option: , , . , , , .
[ ]
addClasses: ui-draggable .
appendTo:
axis:
cancel, handle: , cancel , handle .
connectToSortable: sortable .
containment:
cursor, cursorAt: , .
delay, distance: , delay , distance , .
grid: ( )
helper: , .
iframeFix: iframe .
opacity: helper .
refreshPositions: drop , .
revert, revertDuration: .
scope: draggable , droppable .
scroll, scrollSensitivity, scrollSpeed: .
snap, snapMode, snapTolerance: .
stack, zIndex: .