documon
Version:
A documentation system for mortals. Use with any language.
2,240 lines • 75.2 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Draggable</title>
<meta name="description" content="Makes a DOM Element draggable. NOTE: This is a stand-alone implementation. The jbeeb.utils.Draggable class is used for jbeeb objects. Whereas this class can be used on any DOM element (outside of jbeeb).">
<!-- Normalize -->
<link rel="stylesheet" href="assets/vendor/normalize.css">
<!-- prettify -->
<link rel="stylesheet" href="assets/vendor/prettify/codamike.css">
<script src="assets/vendor/prettify/prettify.js"></script>
<!-- Documon Pages Info. (Used by various classes to identify this page.) -->
<script>
var pageCtx = {
id : "root.Draggable",
name: "Draggable"
}
</script>
<!-- theme
<link rel="stylesheet" href="assets/fonts/Fira_Sans/FiraSans.css">
<link rel="stylesheet" href="assets/fonts/Inconsolata/inconsolata.css">
-->
<link rel="stylesheet" href="assets/css/pages.css">
<script src="assets/js/documon/Storage.js"></script>
<script src="assets/js/documon/Access.js"></script>
<script src="assets/js/documon/Pages.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-106684927-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<div class="page">
<div class="main-method">
<a name="methods"></a>
<div class="part-methods">
<a name="root.Draggable"></a><a name="Draggable"></a>
<div class="member" >
<div class="member-name clearfix">
<span class="member-name-left">
Draggable (<span class="method-arguments">params</span>)
</span>
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/Draggable.js</span>
<span class="member-line-number">37</span>
</span>
</div>
<div class="member-description">
<div class="meta-block meta-block-klass">
<div class="meta-line"><span class="meta-label" >xpath</span> <span class="meta-target">root.Draggable<span></div>
<div class="meta-line"><span class="meta-label" >file</span> <span class="meta-target">documon/template/assets/js/documon/Draggable.js<span></div>
</div>
<p>Makes a DOM Element draggable. NOTE: This is a stand-alone implementation. The jbeeb.utils.Draggable class is used for jbeeb objects. Whereas this class can be used on any DOM element (outside of jbeeb).</p>
<div class="part-parameters">
<div class="heading-part">Parameters</div>
<div class="member">
<div class="member-block-group">
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">params</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">Object</span>
<div class="member-description">
<p>Configuration settings.</p>
</div>
<div class="part-parameters">
<div class="heading-part">params properties</div>
<div class="member">
<div class="member-block-group">
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">target</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">string | DOM Element</span>
<div class="member-description">
<p>The element to move. String = the ID of the element, or send in the DOM element directly.</p>
</div>
</div>
</div>
</div>
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">callback</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">function</span>
<div class="member-description">
<p>A function to ping for each kind of operation. See (callback)[#callback] for details.</p>
</div>
</div>
</div>
</div>
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">constrain</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">string</span>
<div class="member-description">
<p>Constrain movement along the "x" or "y" axis. Both constrain and constrainRect can be used together or independantly.</p>
</div>
</div>
</div>
</div>
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">constrainRect</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">Object</span>
<div class="member-description">
<p>Constrain movement within a rectangle. The rectangle can be any object (including a DisplayObject) that contains the following properties <code>x, y, width, height</code></p>
</div>
</div>
</div>
</div>
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">threshold</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">number</span>
<span class="default-value">
5
</span>
<div class="member-description">
<p>The pixel threshold for issuing the "didMove" flag on "end"</p>
</div>
</div>
</div>
</div>
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">arg</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">any</span>
<div class="member-description">
<p>A custom argument to be delivered to the (callback)[#callback].</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="member">
<div class="heading-example">Example</div>
<div class="example-block">
<pre><code> var myDrag = new documon.Draggable({
target : obj
, callback : fn
, constrain : "x"
, constrainRect : obj
, threshold : 5
});</code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="parts">
<a name="properties"></a>
<div class="part-properties">
<div class="heading-part">Properties</div>
<div class="member">
<div class="member-block-group">
<div class="member-block" data-access="private" >
<div class="member-block-left">
<a name="root.Draggable._callback"></a><a name="_callback"></a>
<span class="member-name">_callback</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/Draggable.js</span><span class="member-line-number" title="documon/template/assets/js/documon/Draggable.js">126</span>
</span>
<div class="param-description">
<span class="type">function</span>
<span class="flag private">private</span> <!-- public private protected -->
<div class="member-description">
<p>Configured callback</p>
</div>
</div>
</div>
</div>
<div class="member-block" data-access="private" >
<div class="member-block-left">
<a name="root.Draggable._callbackArg"></a><a name="_callbackArg"></a>
<span class="member-name">_callbackArg</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/Draggable.js</span><span class="member-line-number" title="documon/template/assets/js/documon/Draggable.js">132</span>
</span>
<div class="param-description">
<span class="type">function</span>
<span class="flag private">private</span> <!-- public private protected -->
<div class="member-description">
<p>Configured argument to send to the (callback)[#callback].</p>
</div>
</div>
</div>
</div>
<div class="member-block" data-access="private" >
<div class="member-block-left">
<a name="root.Draggable._constrain"></a><a name="_constrain"></a>
<span class="member-name">_constrain</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/Draggable.js</span><span class="member-line-number" title="documon/template/assets/js/documon/Draggable.js">138</span>
</span>
<div class="param-description">
<span class="type">object</span>
<span class="flag private">private</span> <!-- public private protected -->
<div class="member-description">
<p>_constrain</p>
</div>
</div>
</div>
</div>
<div class="member-block" data-access="private" >
<div class="member-block-left">
<a name="root.Draggable._constrainRect"></a><a name="_constrainRect"></a>
<span class="member-name">_constrainRect</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/Draggable.js</span><span class="member-line-number" title="documon/template/assets/js/documon/Draggable.js">144</span>
</span>
<div class="param-description">
<span class="type">object</span>
<span class="flag private">private</span> <!-- public private protected -->
<div class="member-description">
<p>_constrainRect</p>
</div>
</div>
</div>
</div>
<div class="member-block" data-access="private" >
<div class="member-block-left">
<a name="root.Draggable._didInitMove"></a><a name="_didInitMove"></a>
<span class="member-name">_didInitMove</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/Draggable.js</span><span class="member-line-number" title="documon/template/assets/js/documon/Draggable.js">189</span>
</span>
<div class="param-description">
<span class="type">object</span>
<span class="flag private">private</span> <!-- public private protected -->
<div class="member-description">
<p>_didInitMove</p>
</div>
</div>
</div>
</div>
<div class="member-block" data-access="private" >
<div class="member-block-left">
<a name="root.Draggable._didMove"></a><a name="_didMove"></a>
<span class="member-name">_didMove</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/Draggable.js</span><span class="member-line-number" title="documon/template/assets/js/documon/Draggable.js">176</span>
</span>
<div class="param-description">
<span class="type">object</span>
<span class="flag private">private</span> <!-- public private protected -->
<div class="member-description">
<p>_didMove</p>
</div>
</div>
</div>
</div>
<div class="member-block" data-access="private" >
<div class="member-block-left">
<a name="root.Draggable._didMoveFudge"></a><a name="_didMoveFudge"></a>
<span class="member-name">_didMoveFudge</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/Draggable.js</span><span class="member-line-number" title="documon/template/assets/js/documon/Draggable.js">183</span>
</span>
<div class="param-description">
<span class="type">object</span>
<span class="flag private">private</span> <!-- public private protected -->
<div class="member-description">
<p>_didMoveFudge</p>
</div>
</div>
</div>
</div>
<div class="member-block" data-access="private" >
<div class="member-block-left">
<a name="root.Draggable._didMoveThreshold"></a><a name="_didMoveThreshold"></a>
<span class="member-name">_didMoveThreshold</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/Draggable.js</span><span class="member-line-number" title="documon/template/assets/js/documon/Draggable.js">195</span>
</span>
<div class="param-description">
<span class="type">function</span>
<span class="flag private">private</span> <!-- public private protected -->
<span class="default-value">
5
</span>
<div class="member-description">
<p>The pixel threshold for issuing the "didMove" flag on "end"</p>
</div>
</div>
</div>
</div>
<div class="member-block" data-access="private" >
<div class="member-block-left">
<a name="root.Draggable._down_bound"></a><a name="_down_bound"></a>
<span class="member-name">_down_bound</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/Draggable.js</span><span class="member-line-number" title="documon/template/assets/js/documon/Draggable.js">201</span>
</span>
<div class="param-description">
<span class="type">object</span>
<span class="flag private">private</span> <!-- public private protected -->
<div class="member-description">
<p>_down_bound</p>
</div>
</div>
</div>
</div>
<div class="member-block" data-access="private" >
<div class="member-block-left">
<a name="root.Draggable._mask"></a><a name="_mask"></a>
<span class="member-name">_mask</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/Draggable.js</span><span class="member-line-number" title="documon/template/assets/js/documon/Draggable.js">220</span>
</span>
<div class="param-description">
<span class="type">DOM Element</span>
<span class="flag private">private</span> <!-- public private protected -->
<div class="member-description">
<p>The overlay masking object used to reject mouse events on underlaying DOM elements.</p>
</div>
</div>
</div>
</div>
<div class="member-block" data-access="private" >
<div class="member-block-left">
<a name="root.Draggable._move_bound"></a><a name="_move_bound"></a>
<span class="member-name">_move_bound</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/Draggable.js</span><span class="member-line-number" title="documon/template/assets/js/documon/Draggable.js">214</span>
</span>
<div class="param-description">
<span class="type">object</span>
<span class="flag private">private</span> <!-- public private protected -->
<div class="member-description">
<p>_move_bound</p>
</div>
</div>
</div>
</div>
<div class="member-block" data-access="private" >
<div class="member-block-left">
<a name="root.Draggable._startMouseX"></a><a name="_startMouseX"></a>
<span class="member-name">_startMouseX</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/Draggable.js</span><span class="member-line-number" title="documon/template/assets/js/documon/Draggable.js">163</span>
</span>
<div class="param-description">
<span class="type">object</span>
<span class="flag private">private</span> <!-- public private protected -->
<div class="member-description">
<p>_startMouseX</p>
</div>
</div>
</div>
</div>
<div class="member-block" data-access="private" >
<div class="member-block-left">
<a name="root.Draggable._startMouseY"></a><a name="_startMouseY"></a>
<span class="member-name">_startMouseY</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/Draggable.js</span><span class="member-line-number" title="documon/template/assets/js/documon/Draggable.js">170</span>
</span>
<div class="param-description">
<span class="type">object</span>
<span class="flag private">private</span> <!-- public private protected -->
<div class="member-description">
<p>_startMouseY</p>
</div>
</div>
</div>
</div>
<div class="member-block" data-access="private" >
<div class="member-block-left">
<a name="root.Draggable._startX"></a><a name="_startX"></a>
<span class="member-name">_startX</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/Draggable.js</span><span class="member-line-number" title="documon/template/assets/js/documon/Draggable.js">150</span>
</span>
<div class="param-description">
<span class="type">object</span>
<span class="flag private">private</span> <!-- public private protected -->
<div class="member-description">
<p>_startX</p>
</div>
</div>
</div>
</div>
<div class="member-block" data-access="private" >
<div class="member-block-left">
<a name="root.Draggable._startY"></a><a name="_startY"></a>
<span class="member-name">_startY</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/Draggable.js</span><span class="member-line-number" title="documon/template/assets/js/documon/Draggable.js">157</span>
</span>
<div class="param-description">
<span class="type">object</span>
<span class="flag private">private</span> <!-- public private protected -->
<div class="member-description">
<p>_startY</p>
</div>
</div>
</div>
</div>
<div class="member-block" data-access="private" >
<div class="member-block-left">
<a name="root.Draggable._target"></a><a name="_target"></a>
<span class="member-name">_target</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/Draggable.js</span><span class="member-line-number" title="documon/template/assets/js/documon/Draggable.js">120</span>
</span>
<div class="param-description">
<span class="type">DOM Element</span>
<span class="flag private">private</span> <!-- public private protected -->
<div class="member-description">
<p>The object we're going to drag.</p>
</div>
</div>
</div>
</div>
<div class="member-block" data-access="private" >
<div class="member-block-left">
<a name="root.Draggable._up_bound"></a><a name="_up_bound"></a>
<span class="member-name">_up_bound</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/Draggable.js</span><span class="member-line-number" title="documon/template/assets/js/documon/Draggable.js">208</span>
</span>
<div class="param-description">
<span class="type">object</span>
<span class="flag private">private</span> <!-- public private protected -->
<div class="member-description">
<p>_up_bound</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a name="methods"></a>
<div class="part-methods">
<div class="heading-part">Methods</div>
<a name="root.Draggable._down"></a><a name="_down"></a>
<div class="member" data-access="private" >
<div class="member-name clearfix">
<span class="member-name-left">
_down (<span class="method-arguments">evt</span>)
<span class="flag private">private</span> <!-- public private protected -->
</span>
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/Draggable.js</span>
<span class="member-line-number">268</span>
</span>
</div>
<div class="member-description">
<p>The mouse "down" listener function</p>
<div class="part-parameters">
<div class="heading-part">Parameters</div>
<div class="member">
<div class="member-block-group">
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">evt</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">MouseEvent</span>
<div class="member-description">
<p>evt</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a name="root.Draggable._initMove"></a><a name="_initMove"></a>
<div class="member" data-access="private" >
<div class="member-name clearfix">
<span class="member-name-left">
_initMove (<span class="method-arguments">evt</span>)
<span class="flag private">private</span> <!-- public private protected -->
</span>
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/Draggable.js</span>
<span class="member-line-number">285</span>
</span>
</div>
<div class="member-description">
<p>A one-time setup to extablish the starting position and create the (mask)[#maks].</p>
<div class="part-parameters">
<div class="heading-part">Parameters</div>
<div class="member">
<div class="member-block-group">
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">evt</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">MouseEvent</span>
<div class="member-description">
<p>Transfered from teh "move" listener.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a name="root.Draggable._move"></a><a name="_move"></a>
<div class="member" data-access="private" >
<div class="member-name clearfix">
<span class="member-name-left">
_move (<span class="method-arguments">evt</span>)
<span class="flag private">private</span> <!-- public private protected -->
</span>
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/Draggable.js</span>
<span class="member-line-number">325</span>
</span>
</div>
<div class="member-description">
<p>The mouse "move" listener function</p>
<div class="part-parameters">
<div class="heading-part">Parameters</div>
<div class="member">
<div class="member-block-group">
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">evt</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">MouseEvent</span>
<div class="member-description">
<p>evt</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a name="root.Draggable._up"></a><a name="_up"></a>
<div class="member" data-access="private" >
<div class="member-name clearfix">
<span class="member-name-left">
_up (<span class="method-arguments">evt</span>)
<span class="flag private">private</span> <!-- public private protected -->
</span>
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/Draggable.js</span>
<span class="member-line-number">398</span>
</span>
</div>
<div class="member-description">
<p>The mouse "up" listener function</p>
<div class="part-parameters">
<div class="heading-part">Parameters</div>
<div class="member">
<div class="member-block-group">
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">evt</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">MouseEvent</span>
<div class="member-description">
<p>evt</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a name="root.Draggable.callback"></a><a name="callback"></a>
<div class="member" data-access="protected" >
<div class="member-name clearfix">
<span class="member-name-left">
callback (<span class="method-arguments">obj</span>, <span class="method-arguments">pos</span>, <span class="method-arguments">kind</span>, <span class="method-arguments">didmove</span>, <span class="method-arguments">arg</span>)
<span class="flag protected">protected</span> <!-- public private protected -->
</span>
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/Draggable.js</span>
<span class="member-line-number">257</span>
</span>
</div>
<div class="member-description">
<p>The function to ping when an operation occurs.</p>
<div class="part-parameters">
<div class="heading-part">Parameters</div>
<div class="member">
<div class="member-block-group">
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">obj</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">object</span>
<div class="member-description">
<p>The internal object we use to manage the</p>
</div>
</div>
</div>
</div>
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">pos</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">object</span>
<div class="member-description">
<p>An object with the following properties: left, top</p>
</div>
</div>
</div>
</div>
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">kind</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">string</span>
<div class="member-description">
<p>The kind of operation that occured. Can be "start" | "end" | "move"</p>
</div>
</div>
</div>
</div>
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">didmove</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">boolean</span>
<div class="member-description">
<p>Indicates if the item was simply clicked, or if it was dragged. Only issued when event == "end"</p>
</div>
</div>
</div>
</div>
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">arg</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">any</span>
<div class="member-description">
<p>The argument that was defined during initialization.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a name="root.Draggable.destroy"></a><a name="destroy"></a>
<div class="member" >
<div class="member-name clearfix">
<span class="member-name-left">
destroy ()
</span>
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/Draggable.js</span>
<span class="member-line-number">442</span>
</span>
</div>
<div class="member-description">
<p>Destroys and removes listeners.</p>
</div>
</div>
<a name="root.Draggable.init"></a><a name="init"></a>
<div class="member" data-access="protected" >
<div class="member-name clearfix">
<span class="member-name-left">
init (<span class="method-arguments">params</span>)
<span class="flag protected">protected</span> <!-- public private protected -->
</span>
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/Draggable.js</span>
<span class="member-line-number">229</span>
</span>
</div>
<div class="member-description">
<p>Initialize</p>
<div class="part-parameters">
<div class="heading-part">Parameters</div>
<div class="member">
<div class="member-block-group">
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">params</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">object</span>
<div class="member-description">
<p>See main class description for details.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a name="root.Draggable.parsePos"></a><a name="parsePos"></a>
<div class="member" data-access="private" >
<div class="member-name clearfix">
<span class="member-name-left">
parsePos (<span class="method-arguments">elem</span>)
<span class="flag private">private</span> <!-- public private protected -->
</span>
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/Draggable.js</span>
<span class="member-line-number">83</span>
</span>
</div>
<div class="member-description">
<p>Gets the CSS position (releative) of a DOM Element.</p>
<div class="part-parameters">
<div class="heading-part">Parameters</div>
<div class="member">
<div class="member-block-group">
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">elem</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">DOM Element</span>
<div class="member-description">
<p>The element</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a name="root.Draggable.setConstrain"></a><a name="setConstrain"></a>
<div class="member" >
<div class="member-name clearfix">
<span class="member-name-left">
setConstrain (<span class="method-arguments">val</span>)
</span>
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/Draggable.js</span>
<span class="member-line-number">434</span>
</span>
</div>
<div class="member-description">
<p>Causes the movement to be contrained along the X or Y axis.</p>
<div class="part-parameters">
<div class="heading-part">Parameters</div>
<div class="member">
<div class="member-block-group">
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">val</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">string</span>
<div class="member-description">
<p>Use "x" or "y". Use "null" or no argument to clear contstraint.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a name="root.Draggable.setConstrainRect"></a><a name="setConstrainRect"></a>
<div class="member" >
<div class="member-name clearfix">
<span class="member-name-left">
setConstrainRect (<span class="method-arguments">val</span>)
</span>
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/Draggable.js</span>
<span class="member-line-number">425</span>
</span>
</div>
<div class="member-description">
<p>Sets the rectangle used to for the boundaries that the item can move within.</p>
<div class="part-parameters">
<div class="heading-part">Parameters</div>
<div class="member">
<div class="member-block-group">
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">val</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">Object</span>
<div class="member-description">
<p>An object containing the following properties: <code>x, y, width, height</code>. Use "null" or no argument to clear contstraint.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a name="root.Draggable.setX"></a><a name="setX"></a>
<div class="member" data-access="private" >
<div class="member-name clearfix">
<span class="member-name-left">
setX (<span class="method-arguments">evt</span>, <span class="method-arguments">val</span>)
<span class="flag private">private</span> <!-- public private protected -->
</span>
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/Draggable.js</span>
<span class="member-line-number">48</span>
</span>
</div>
<div class="member-description">
<p>Shortcut to set the style position.</p>
<div class="part-parameters">
<div class="heading-part">Parameters</div>
<div class="member">
<div class="member-block-group">
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">evt</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">DOM Element</span>
<div class="member-description">
<p>The element to move.</p>
</div>
</div>
</div>
</div>
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">val</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">number</span>
<div class="member-description">
<p>The x position in pixels.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a name="root.Draggable.setXY"></a><a name="setXY"></a>
<div class="member" data-access="private" >
<div class="member-name clearfix">
<span class="member-name-left">
setXY (<span class="method-arguments">evt</span>, <span class="method-arguments">x</span>, <span class="method-arguments">x</span>)
<span class="flag private">private</span> <!-- public private protected -->
</span>
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/Draggable.js</span>
<span class="member-line-number">71</span>
</span>
</div>
<div class="member-description">
<p>Shortcut to set the style position.</p>
<div class="part-parameters">
<div class="heading-part">Parameters</div>
<div class="member">
<div class="member-block-group">
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">evt</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">DOM Element</span>
<div class="member-description">
<p>The element to move.</p>
</div>
</div>
</div>
</div>
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">x</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">number</span>
<div class="member-description">
<p>The x position in pixels.</p>
</div>
</div>
</div>
</div>
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">x</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">number</span>
<div class="member-description">
<p>The y position in pixels.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a name="root.Draggable.setY"></a><a name="setY"></a>
<div class="member" data-access="private" >
<div class="member-name clearfix">
<span class="member-name-left">
setY (<span class="method-arguments">evt</span>, <span class="method-arguments">val</span>)
<span class="flag private">private</span> <!-- public private protected -->
</span>
<span class="member-name-right">
<span class="member-file">documon/template/assets/js/documon/Draggable.js</span>
<span class="member-line-number">59</span>
</span>
</div>
<div class="member-description">
<p>Shortcut to set the style position.</p>
<div class="part-parameters">
<div class="heading-part">Parameters</div>
<div class="member">
<div class="member-block-group">
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">evt</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">DOM Element</span>
<div class="member-description">
<p>The element to move.</p>
</div>
</div>
</div>
</div>
<div class="member-block" >
<div class="member-block-left">
<span class="member-name">val</span>
</div>
<div class="member-block-center">
<span class="member-name-right">
</span>
<div class="param-description">
<span class="type">number</span>
<div class="member-description">
<p>The y position in pixels.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">Generated by <a href="http://www.documon.net" target="_blank">Documon</a></div>
</body>
</html>