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:        .