Login
extension joomla, template joomla,banner extension joomla,jomla slider,slider joomla

Draggable to move elements using mouse anywher in screen using JQuery UI

Hits: 1057
Draggable elements in jQuery

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 ) {}






Related Article


Spinner Jquery UI to enter Numeric data with UP Down control
Progress bar with dynamically changing value using JQuery UI
Jquery menu and submenu UI
Dialog box to display or take user inputs using form on a webpage and post or update record in database
Droppable elment are targets to accept draggable element using JQuery UI
Draggable to move elements using mouse anywher in screen using JQuery UI

destination source:https://www.plus2net.com/jquery/draggable.php

Tutorials Menu