properties draggable

identifier
1. identifier is used to write down notes of animations, actions and anything we find important to make note of
    identifier is a visual reference
2. identifier also provides a quick overview of the function structure flow
STRUCTURE: function (e) { javascript before - selector - event (e,ui) - javascript after }

selector
target an object by id (#) or class (.) or element
the full range on selectors is beyond the scope of this manual
for an in depth on selectors simplified see here
•••• var: string

handle | selector
handle | selector will restrict dragging to a specific object , without handle restrict , the whole object is draggable
ie. we have a draggable Layer1 and we want a Shape1 as a bar on top that we want to act as a drag handle
for our draggable Layer1, then we add #wb_Shape1 as our   handle | selector
•••• var: string

cancel | selector
cancel | selector will prevent dragging by a specific object
ie. we have a draggable Layer1 and we have an Image1 on it that we want to exclude from executing the drag
then we add #wb_Image1 as our   cancel | selector
•••• var: string

axis
axis will make a draggable restrict it's movement to a X (horizontal) or Y (vertical) axis
•••• var: string

containment | selector
containment | selector will restrict dragging to a specified boundary
the boundary can be   window   or   document   or   parent   or   object   or setting a   [x1,y1,x2,y2] position
1.
window, document and parent are level objects, with window being the top level
2.
any object can act as a container for a draggable
ie.
we have a draggable Shape1 and we want a Shape2 to restrict it's movement
we add #wb_Shape2 as the selector, Shape2 will now construct the boundary for Shape1
3.
we can also use [x1,y1,x2,y2] as boundary restriction for a draggable, we can set the XY1(start) and XY2(end) position
ie. [0,0,200,200] will restrict movement from top: 0 left: 0 --TO-- top: 200 left: 200
      NOTE: when constructed as a variable the X and Y must be dealt with as single items
      the variable can not be    var myContain = 10,50,200,200   but must be   var conX1 = 10   and a second   var conY1 = 50    etc
      this property is then constructed as   containment: [conX1,conY1,conX2,conY2]
•••• var: string ( selector )   |   •••• var: non-string ( [x1,y1,x2,y2] - window -document - parent )

cursor | style
set the cursor style during a draggable
•••• var: string

cursor | restrict
cursor | restrict will restrict the position of the cursor on a fixed XY position relative to the draggable
the syntax for setting the XY position is {top:50,left:50}
IMPORTANT: set this property to   false   if not used
•••• var: non-string

grid
grid makes a draggable snap to a XY grid on drag
      NOTE: when constructed as a variable the X and Y must be dealt with as single items
      the variable can not be    var myGrid = 10,50   but must be   var gridX = 5   and a second   var gridY = 5
      this property is then constructed as   grid: gridX,gridY
•••• var: non-string

helper | enable
enable or disable the draggable helper completely, the helper is a visual feedback for the draggable

helper | type
helper | type is the helper object that is shown while dragging, we can either drag the object itself the original, or a clone
dragging a clone will not change the position of the dragged object
•••• var: string

helper | opacity
helper | opacity will set the opacity of the helper while being dragged
•••• var: non-string

helper | z-index
helper | z-index will set the z-index of the helper
•••• var: non-string

iframe fix
iframe fix will prevent an iframe from capturing the dragged (cursor) while moving over an iframe
•••• var: non-string

revert | enable   &   revert | duration
revert | enable will make a draggable return back to it's position automatically (true or false)
revert is also used in combination with a droppable, the options then are valid or invalid
valid   = the draggable revert back outside of the droppable
invalid = the draggable reverts back inside the droppable
revert | duration is the time in milliseconds the object will return back (revert) to it's position
•••• var: non-string   |   •••• var: string ( valid - invalid )

stack | selector
stack | selector   will automatically control the z-index of a draggable, moving it to front in relation to this selector
•••• var: string

stack | z-index
stack | z-index   allows to set a z-index for the draggable manual
use it to stack a draggable on top of all content by giving it a high z-index
•••• var: string

scroll enable   &   scroll sensitivity   &   scroll speed
scroll enable will allow window scroll on drag    (true or false)
scroll sensitivity will start window scroll if the object is in this distance in pixels to the window border
scroll speed is the speed to which the window will scroll (higher is faster, is amount of pixels)
•••• var: non-string

snap | selector
snap | selector will make a draggable snap to surrounding objects
01. a draggable can snap to all other draggable objects, set this property to   true   to enable that
02. a draggable can also be snapped to specific objects, use a   selector   to enable that
NOTE: set to   false   if not used
•••• var: string ( selector )   |   •••• var: non-string ( true - false )

snap | mode   & snap | tolerance
snap | mode will make a draggable snap to a surrounding object at it's inner, outer or both
snap | tolerance is the distance in pixels, to when the draggable will snap to it's surrounding
•••• var: string ( mode )   |   •••• var: non-string ( tolerance )

delay time   &   delay distance
delay time is the time the draggable will delay in milliseconds before executing the drag action
delay distance is the distance the cursor will move in pixels before executing the drag action

break to body
enable the object(s) to break to the body
use this option to force the object to be on top of ie. a WB page header   etc if required - (=if page is centered)
•••• var: non-string

event | start   &   event | stop   &   event | drag
with these properties we can add a new function to our object on event
just as the callback function is beyond the scope of this manual, so is this property
for an in depth on callback see here
   • fn: start/stop/drag: function (e,ui) { }
   ui.helper    = current draggable helper (jquery object)
   ui.position = current css position of the draggable helper    (.left .top)
   ui.offset    = current offset position of the draggable helper (.left .top)

run on load
run on load enables or disables this module to run on page load

run on call
run on call is the function name we can give this current function
we can call this function to occur ie. by using a    callback | function
for an in depth on callback and run on call see here

code modification | variable
add function variable(s) ie. Call_Drag_1(myVariable)
this function is beyond the scope of this manual   see here

code modification | javascript | after
add javascript, further enhancing this function by adding custom code
this function is beyond the scope of this manual   see here

code modification | javascript | before
add javascript, further enhancing this function by adding custom code
this function is beyond the scope of this manual   see here