jQuery UI-Draggable parameter collection_jquery

Draggable
Library files: ui/ui.core.js, ui/ui.draggable.js
========================== ===================================
Default:
$(”#draggable”) .draggable();
============================================ ==================
constrain-movement (limited range movement):
$("#draggable").draggable({ axis: 'y' } ); //Limit the y-axis
$(”#draggable2″).draggable({ axis: ‘x’ }); //Limit the x-axis
$(”#draggable3″).draggable({ containment: '#containment-wrapper', scroll: false }); //No scroll bar appears
$("#draggable4″).draggable({ containment: '#demo-frame' });
$(" #draggable5″).draggable({ containment: 'parent' }); //Limited to the parent frame
======================== ====================================
delay-start (delayed movement):
$(”#draggable”).draggable({ distance: 20 }); //Move 20 pixels and start dragging
$(”#draggable2″).draggable({ delay: 1000 }); //Delay 1 Start dragging after seconds
============================================ ==================
snap-to (snap-to):
$(”#draggable”).draggable({ snap: true }); / /Default, any way to absorb
$(”#draggable2″).draggable({ snap: '.ui-widget-header' }); //Adsorb using the inner and outer diameter of an element
$(”#draggable3 ″).draggable({ snap: '.ui-widget-header', snapMode: 'outer' }); //Adsorb with the outer diameter of an element, the adsorption method: the upper part sucks the lower part, the lower part sucks the upper part. Inner diameter Adsorption: inner, adsorption method: opposite
$(”#draggable4″).draggable({ grid: [20,20] });//Move at a certain distance
$(”#draggable5″).draggable ({ grid: [80, 80] });
==================================== =========================
scroll：
$(”#draggable”).draggable({ scroll: true });
$(”#draggable2″).draggable({ scroll: true, scrollSensitivity: 100 }); //Scroll bar sensitivity
$(”#draggable3″).draggable({ scroll: true, scrollSpeed: 100 }); //Scroll speed
========================================== =====================
revert position (restore to original position):
$("#draggable").draggable({ revert: true }); //revert:true set to restore to position
$(”#draggable2″).draggable({ revert: true, helper: 'clone' }); //helper:'clone' copy drag
================================================== ============
visualfeedback (visual effect):
$("#draggable").draggable({ helper: 'original' }); // Settings are not copied (initialization Setting)
$("#draggable2").draggable({ opacity: 0.7, helper: 'clone' }); //opacity sets transparency and clones the element
$("#draggable3").draggable( {
cursor: 'move', //Set the mouse graphic
cursorAt: { top: -12, left: -20 }, //Set the position and positioning coordinates
helper: function(event) {
return $('
I'm a custom helper
');
} //Create a new prompt element, set its mouse positioning position value above
});
$(" #set div”).draggable({ stack: { group: '#set div', min: -1 } });//Group settings are dragged, and the last added element is superimposed on top of the group. Suitable for making a wishing board effect.
================================================== =============
Drag handle (drag point setting):
$("#draggable").draggable({ handle: 'p' }); //handle Set the drag position
$(”#draggable2″).draggable({ cancel: “p.ui-widget-header” }); //cancel sets the drag position
====== ================================================== ====
Cursor style (mouse style):
$("#draggable").draggable({ cursorAt: { cursor: 'move', top: 56, left: 56 } }); // cursor sets the mouse style, and top, left, right, and bottom set the positioning point of the element relative to the mouse
$("#draggable2").draggable({ cursorAt: { cursor: 'crosshair', top: -5, left: - 5 } });
$(”#draggable3″).draggable({ cursorAt: { bottom: 0 } });
================== =========================================
Cursor style (mouse style) ：
$(”#draggable”).draggable({ cursorAt: { cursor: 'move', top: 56, left: 56 } }); //cursor sets the mouse style, top, left, right, bottom settings The positioning point of the element relative to the mouse
============================================== ===================
Draggable sortable:
$("#sortable").sortable({
revert: true
}) ;
$("#draggable").draggable({
connectToSortable: '#sortable', //Set dragging to add to other lists
helper: 'clone',
revert: ' invalid'
});