Draggable elements in jQuery

Drag me using Mouse

Press the left mouse key and drag this element in your screen.
<script>
$(document).ready(function() {
////////////////
$( function() {
    $( "#draggable" ).draggable();
  });
///////////
})
</script>

Droppable

Options
addClasses
Type : Boolean
Default value : true

By Default the draggable element will inherent the class ui-draggable ( if the addClass value is not set to false while initializing ) We can read the value set for addClasses option like this
$( "#draggable" ).draggable({
addClasses: true
});
To read value of addClasses
var addClasses = $( ".drg_box" ).draggable( "option", "addClasses" );
To set the value of addClasses
$( ".drg_box" ).draggable( "option", "addClasses", false ); 
appendTo
Type : JQuery Object, Element, Selector, String
Default value : 'parent'

This will work when helper option is set to 'clone'
$( "#draggable" ).draggable({
appendTo: "body"
});
To read value
var appendTo = $( ".drg_box" ).draggable( "option", "appendTo" );
To set the value
$( ".drg_box" ).draggable( "option", "appendTo", "body" ); 
axis
Type : String
Default value : 'false'
Possible values: "x", "y"

Allow movment in X ( Horizontal ) or Y ( Vertical) axis.
$( "#draggable" ).draggable({
axis: "x"
});
To read value
var axis = $(".drg_box").draggable( "option", "axis" );
To set the value
$( ".drg_box" ).draggable( "option", "axis", 'y' ); 
cancel
Type : Selector
Default value : 'input,textarea,button,select,option'
Prevent element from dragging though the class is declared as draggable.
$( "#draggable" ).draggable({
cancel: "select"
});
To read value
var cancel = $( ".drg_box" ).draggable( "option", "cancel" );
To set the value to button element.
$( ".drg_box" ).draggable( "option", "cancel", "button" );
connectToSortable
Type : Selector
Default value : false
We can attach our draggable element to sortable list.
$( "#draggable" ).draggable({
connectToSortable: "#my-sortable"
});
To read value
var connectToSortable = $( ".drg_box" ).draggable( "option", "connectToSortable" );
To set the value to element
$( ".drg_box" ).draggable( "option", "connectToSortable", "#my-sortable2" );
containment
Type : Selector , Element, String or Array
Default value : false
We can restrict the movement (bounds ) of draggable element by using above types. .
$( "#draggable" ).draggable({
containment: "parent"
});
To read value
var containment = $( ".drg_box" ).draggable( "option", "containment" );
To set the value to element
$( ".drg_box" ).draggable( "option", "containment", "#box1" );
cursor
Type : String
Default value : "auto"
The shape of cursor during drag operation
$( "#draggable" ).draggable({
cursor: "crosshair"
});
To read value
var cursor = $( ".drg_box" ).draggable( "option", "cursor" );
To set the value to element
$( ".drg_box" ).draggable( "option", "cursor", "help" );
cursorAt
Type : Object
Default value : false
Coordinates can be given by any one or two of this { left, top, right, bottom}
$( "#draggable" ).draggable({
cursorAt: {right:20}
});
To read value
var cursorAt = $( ".drg_box" ).draggable( "option", "cursorAt" );
To set the value to element
$( ".drg_box" ).draggable( "option", "cursorAt", {top:20} );
delay
Type : Number
Default value : 0
Time delay in milliseconds between mouse down and dragging to start
$( "#draggable" ).draggable({
delay: 1000
});
To read value
var delay = $( ".drg_box" ).draggable( "option", "delay" );
To set the value to element
$( ".drg_box" ).draggable( "option", "delay", 500 );
disabled
Type : Boolean
Default value : false
Disable dragging if set to false
$( "#draggable" ).draggable({
disabled:false
});
To read value
var disabled = $( ".drg_box" ).draggable( "option", "disabled" );
To set the value to element
$( ".drg_box" ).draggable( "option", "disabled", false );
distance
Type : Number
Default value : 1
Disable dragging if set to false
$( "#draggable" ).draggable({
distance:100
});
To read value
var distance = $( ".drg_box" ).draggable( "option", "distance" );
To set the value to element
$( ".drg_box" ).draggable( "option", "distance", 50 );
grid
Type : Array
Default value : false
Always allign with specified grid while dragging.
$( "#draggable" ).draggable({
grid:[10,10]
});
To read value
var grid = $( ".drg_box" ).draggable( "option", "grid" );
To set the value to element
$( ".drg_box" ).draggable( "option", "grid", [50,60] );
handle
Type : Selector or Element
Default value : false
Dragging starts when mousedown is over the defined selector or element ( descended of draggable element )
$( "#draggable" ).draggable({
handle:'p'
});
To read value
var handle = $( ".drg_box" ).draggable( "option", "handle" );
To set the value to element
$( ".drg_box" ).draggable( "option", "handle", "h4" );
helper
Type : String or Function
Default value : "original"
How the helper element is used while dragging.
$( "#draggable" ).draggable({
helper: "clone"
});
To read value
var helper = $( ".drg_box" ).draggable( "option", "helper" );
To set the value to element
$( ".drg_box" ).draggable( "option", "helper", 'clone' );
iframeFix
Type : Boolean or Selector
Default value : false
Use to prevent mousmove event during drag in a iframe.
$( "#draggable" ).draggable({
iframeFix: false
});
To read value
var iframeFix = $( ".drg_box" ).draggable( "option", "iframeFix" );
To set the value to element
$( ".drg_box" ).draggable( "option", "iframeFix", false );
opacity
Type : number
Default value : false
Opacity is applied while dragging the helper.
$( "#draggable" ).draggable({
opacity: 0.45
});
To read value
var opacity = $( ".drg_box" ).draggable( "option", "opacity" );
To set the value to element
$( ".drg_box" ).draggable( "option", "opacity", 0.25 );
refreshPosition
Type : Boolean
Default value : false
Position of droppable element is calculated in all steps of mousemove. .
$( "#draggable" ).draggable({
refreshPosition: true
});
To read value
var refreshPosition = $( ".drg_box" ).draggable( "option", "refreshPosition" );
To set the value to element
$( ".drg_box" ).draggable( "option", "refreshPosition", false );
revert
Type : Boolean, string of Function
Default value : false
The element should return to starting position once dragging is stopped. .
$( "#draggable" ).draggable({
revert: true
});
To read value
var revert = $( ".drg_box" ).draggable( "option", "revert" );
To set the value to element
$( ".drg_box" ).draggable( "option", "revert",true );
revertDuration
Type : number
Default value : 500
The duration in milliseconds the element should take to return to starting position once dragging is stopped. .
$( "#draggable" ).draggable({
revert:true,
revertDuration: 5000
});
To read value
var revertDuration = $( ".drg_box" ).draggable( "option", "revertDuration" );
To set the value to element
$( ".drg_box" ).draggable( "option", "revertDuration", 1000 );
scope
Type : string
Default value : "default"
To set a group of draggable item to droppable item . .
$( "#draggable" ).draggable({
scope: "#my-sortable1"
});
To read value
var scope = $( ".drg_box" ).draggable( "option", "scope" );
To set the value to element
$( ".drg_box" ).draggable( "option", "scope", "#my-sortable2" );
scroll
Type : Boolean
Default value : true
Set auto scroll while dragging the element . .
$( "#draggable" ).draggable({
scroll: true
});
To read value
var scroll = $( ".drg_box" ).draggable( "option", "scroll" );
To set the value to element
$( ".drg_box" ).draggable( "option", "scroll", true );
scrollSensitivity
Type : Number
Default value : 20
Set auto scroll while dragging the element . .
$( "#draggable" ).draggable({
scrollSensitivity: 10
});
To read value
var scrollSensitivity = $( ".drg_box" ).draggable( "option", "scrollSensitivity" );
To set the value to element
$( ".drg_box" ).draggable( "option", "scrollSensitivity", 100 );
destroy
Removed the draggable functionality
$( ".drg_box" ).draggable( "destroy");
disable
Disable the draggable functionality
$( ".drg_box" ).draggable( "disable");
enable
Enable the draggable functionality
$( ".drg_box" ).draggable( "enable");
create
Triggered when it is created.
create: function( event, ui ) {}
drag
Triggered when it is dragged.
drag: function( event, ui ) {}
start
Triggered when it is dragging started .
start: function( event, ui ) {}
stop
Triggered when dragging stopped.
stop: function( event, ui ) {}


Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com



    Post your comments , suggestion , error , requirements etc here .







    Most Popular JQuery Scripts

    1

    Two dependant list boxes

    2

    Calendar with Date Selection

    3

    Data change by Slider

    4

    Show & Hide element


    JQuery Video Tutorials




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer