mirror of
https://github.com/librenms/librenms.git
synced 2024-10-07 16:52:45 +00:00
379 lines
11 KiB
HTML
379 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>src/jquery.draggable.js</title>
|
|
<link rel="stylesheet" href="http://yui.yahooapis.com/3.5.1/build/cssgrids/cssgrids-min.css">
|
|
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
|
|
<link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
|
|
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
|
|
<script src="http://yui.yahooapis.com/combo?3.5.1/build/yui/yui-min.js"></script>
|
|
</head>
|
|
<body class="yui3-skin-sam">
|
|
|
|
<div id="doc">
|
|
<div id="hd" class="yui3-g header">
|
|
<div class="yui3-u-3-4">
|
|
|
|
<!-- <h1><img src="../assets/css/logo.png" title=""></h1> -->
|
|
<h1><img src="http://ducksboard.com/wp-content/themes/blog-theme-ducksboard/images/ducksboard.png" title=""></h1>
|
|
|
|
</div>
|
|
<div class="yui3-u-1-4 version">
|
|
<em>API Docs for: </em>
|
|
</div>
|
|
</div>
|
|
<div id="bd" class="yui3-g">
|
|
|
|
<div class="yui3-u-1-4">
|
|
<div id="docs-sidebar" class="sidebar apidocs">
|
|
<div id="api-list">
|
|
<h2 class="off-left">APIs</h2>
|
|
<div id="api-tabview" class="tabview">
|
|
<ul class="tabs">
|
|
<li><a href="#api-classes">Classes</a></li>
|
|
<li><a href="#api-modules">Modules</a></li>
|
|
</ul>
|
|
|
|
<div id="api-tabview-filter">
|
|
<input type="search" id="api-filter" placeholder="Type to filter APIs">
|
|
</div>
|
|
|
|
<div id="api-tabview-panel">
|
|
<ul id="api-classes" class="apis classes">
|
|
|
|
<li><a href="../classes/Collision
|
|
|
|
Detects collisions between a DOM element against other DOM elements or
|
|
Coords objects..html">Collision
|
|
|
|
Detects collisions between a DOM element against other DOM elements or
|
|
Coords objects.</a></li>
|
|
|
|
<li><a href="../classes/Coords
|
|
|
|
Creates objects with coordinates (x1, y1, x2, y2, cx, cy, width, height)
|
|
to simulate DOM elements on the screen.
|
|
Coords is used by Gridster to create a faux grid with any DOM element can
|
|
collide..html">Coords
|
|
|
|
Creates objects with coordinates (x1, y1, x2, y2, cx, cy, width, height)
|
|
to simulate DOM elements on the screen.
|
|
Coords is used by Gridster to create a faux grid with any DOM element can
|
|
collide.</a></li>
|
|
|
|
<li><a href="../classes/Draggable.html">Draggable</a></li>
|
|
|
|
<li><a href="../classes/Gridster.html">Gridster</a></li>
|
|
|
|
</ul>
|
|
|
|
<ul id="api-modules" class="apis modules">
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="yui3-u-3-4">
|
|
<div id="api-options">
|
|
Show:
|
|
<label for="api-show-inherited">
|
|
<input type="checkbox" id="api-show-inherited" checked>
|
|
Inherited
|
|
</label>
|
|
|
|
<label for="api-show-protected">
|
|
<input type="checkbox" id="api-show-protected">
|
|
Protected
|
|
</label>
|
|
|
|
<label for="api-show-private">
|
|
<input type="checkbox" id="api-show-private">
|
|
Private
|
|
</label>
|
|
<label for="api-show-deprecated">
|
|
<input type="checkbox" id="api-show-deprecated">
|
|
Deprecated
|
|
</label>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="apidocs">
|
|
<div id="docs-main">
|
|
<div class="content">
|
|
<h1 class="file-heading">File: src/jquery.draggable.js</h1>
|
|
|
|
<div class="file">
|
|
<pre class="code prettyprint linenums">
|
|
/*
|
|
* jquery.draggable
|
|
* https://github.com/ducksboard/gridster.js
|
|
*
|
|
* Copyright (c) 2012 ducksboard
|
|
* Licensed under the MIT, GPL licenses.
|
|
*/
|
|
|
|
;(function($, window, document, undefined){
|
|
|
|
var defaults = {
|
|
items: '.gs_w',
|
|
distance: 1,
|
|
limit: true,
|
|
offset_left: 0
|
|
// ,drag: function(e){},
|
|
// start : function(e, ui){},
|
|
// stop : function(e){}
|
|
};
|
|
|
|
var $body = $(document.body);
|
|
|
|
|
|
/**
|
|
* @class Draggable
|
|
*
|
|
* @param {HTMLElement} el The HTMLelement that contains all the widgets
|
|
* to be dragged.
|
|
* @param {Object} [options] An Object with all options you want to
|
|
* overwrite:
|
|
* @param {HTMLElement|String} [options.items] Define who will
|
|
* be the draggable items. Can be a CSS Selector String or a
|
|
* collection of HTMLElements.
|
|
* @param {Number} [options.distance] Distance in pixels after mousedown
|
|
* the mouse must move before dragging should start.
|
|
* @param {Boolean} [options.limit] Constrains dragging to the width of
|
|
* the container
|
|
* @param {offset_left} [options.offset_left] Offset added to the item
|
|
* that is being dragged.
|
|
* @param {Number} [options.drag] Executes a callback when the mouse is
|
|
* moved during the dragging.
|
|
* @param {Number} [options.start] Executes a callback when the drag
|
|
* starts.
|
|
* @param {Number} [options.stop] Executes a callback when the drag stops.
|
|
* @return {Object} Returns `el`.
|
|
* @constructor
|
|
*/
|
|
function Draggable(el, options) {
|
|
this.options = $.extend({}, defaults, options);
|
|
this.$container = $(el);
|
|
this.$dragitems = $(this.options.items, this.$container);
|
|
this.is_dragging = false;
|
|
this.player_min_left = 0 + this.options.offset_left;
|
|
|
|
this.init();
|
|
};
|
|
|
|
var fn = Draggable.prototype;
|
|
|
|
fn.init = function() {
|
|
this.$container.css('position', 'relative');
|
|
this.enable();
|
|
};
|
|
|
|
|
|
fn.get_actual_pos = function($el) {
|
|
var pos = $el.position();
|
|
return pos;
|
|
};
|
|
|
|
|
|
fn.get_mouse_pos = function(e) {
|
|
return {
|
|
left: e.clientX,
|
|
top: e.clientY
|
|
};
|
|
};
|
|
|
|
|
|
fn.drag_handler = function(e) {
|
|
if (e.which !== 1) {
|
|
return false;
|
|
};
|
|
|
|
var self = this;
|
|
var first = true;
|
|
this.$player = $(e.currentTarget);
|
|
|
|
this.el_init_pos = this.get_actual_pos(this.$player);
|
|
this.mouse_init_pos = this.get_mouse_pos(e);
|
|
|
|
$body.on('mousemove.draggable', function(mme){
|
|
|
|
var mouse_actual_pos = self.get_mouse_pos(mme);
|
|
var diff_x = Math.abs(mouse_actual_pos.left - self.mouse_init_pos.left);
|
|
var diff_y = Math.abs(mouse_actual_pos.top - self.mouse_init_pos.top);
|
|
if (!(diff_x > self.options.distance || diff_y > self.options.distance)) {
|
|
return false;
|
|
}
|
|
|
|
if (first) {
|
|
first = false;
|
|
self.on_dragstart.call(self, mme);
|
|
return false;
|
|
}
|
|
|
|
if (self.is_dragging == true) {
|
|
throttle(self.on_dragmove.call(self, mme), 130);
|
|
};
|
|
|
|
return false;
|
|
|
|
});
|
|
|
|
return false;
|
|
};
|
|
|
|
|
|
fn.on_dragstart = function(e) {
|
|
e.preventDefault();
|
|
this.drag_start = true;
|
|
this.is_dragging = true;
|
|
this.$container_offset = this.$container.offset();
|
|
if (this.options.helper === 'clone') {
|
|
this.$helper = this.$player.clone().appendTo(this.$container).addClass('helper');
|
|
this.helper = true;
|
|
}else{
|
|
this.helper = false;
|
|
}
|
|
this.el_init_offset = this.$player.offset();
|
|
this.player_width = this.$player.width();
|
|
this.player_max_left = this.$container.width() - this.player_width + this.options.offset_left;
|
|
if (this.options.start) {
|
|
this.options.start.call(this.$player, e, {
|
|
helper: this.helper ? this.$helper : this.$player
|
|
});
|
|
};
|
|
return false;
|
|
};
|
|
|
|
|
|
fn.get_offset = function(e) {
|
|
e.preventDefault();
|
|
var mouse_actual_pos = this.get_mouse_pos(e);
|
|
var diff_x = mouse_actual_pos.left - this.mouse_init_pos.left;
|
|
var diff_y = mouse_actual_pos.top - this.mouse_init_pos.top;
|
|
|
|
var left = this.el_init_offset.left + diff_x - this.$container_offset.left;
|
|
var top = this.el_init_offset.top + diff_y - this.$container_offset.top;
|
|
|
|
if (this.options.limit) {
|
|
if (left > this.player_max_left) {
|
|
left = this.player_max_left;
|
|
}else if(left < this.player_min_left) {
|
|
left = this.player_min_left;
|
|
}
|
|
};
|
|
|
|
return {
|
|
left: left,
|
|
top: top
|
|
}
|
|
};
|
|
|
|
|
|
fn.on_dragmove = function(e) {
|
|
var offset = this.get_offset(e);
|
|
|
|
(this.helper ? this.$helper : this.$player).css({
|
|
'position': 'absolute',
|
|
'left' : offset.left,
|
|
'top' : offset.top
|
|
});
|
|
|
|
var ui = {
|
|
'position': {
|
|
'left': offset.left,
|
|
'top': offset.top
|
|
}
|
|
};
|
|
|
|
if (this.options.drag) {
|
|
this.options.drag.call(this.$player, e, ui);
|
|
}
|
|
return false;
|
|
};
|
|
|
|
|
|
fn.on_dragstop = function(e) {
|
|
var offset = this.get_offset(e);
|
|
|
|
this.drag_start = false;
|
|
|
|
var ui = {
|
|
'position': {
|
|
'left': offset.left,
|
|
'top': offset.top
|
|
}
|
|
}
|
|
|
|
if (this.options.stop) {
|
|
this.options.stop.call(this.$player, e, ui);
|
|
}
|
|
|
|
if (this.helper) {
|
|
this.$helper.remove();
|
|
}
|
|
|
|
return false;
|
|
};
|
|
|
|
|
|
fn.enable = function(){
|
|
this.$container.on('mousedown.draggable', this.options.items, $.proxy(this.drag_handler, this));
|
|
$body.on('mouseup.draggable', $.proxy(function(e) {
|
|
this.is_dragging = false;
|
|
$body.off('mousemove.draggable');
|
|
if (this.drag_start) {
|
|
this.on_dragstop(e);
|
|
}
|
|
}, this));
|
|
};
|
|
|
|
|
|
fn.disable = function(){
|
|
this.$container.off('mousedown.draggable');
|
|
$body.off('mouseup.draggable');
|
|
};
|
|
|
|
|
|
fn.destroy = function(){
|
|
this.disable();
|
|
$.removeData(this.$container, 'draggable');
|
|
};
|
|
|
|
|
|
//jQuery adapter
|
|
$.fn.draggable = function ( options ) {
|
|
return this.each(function () {
|
|
if (!$.data(this, 'draggable')) {
|
|
$.data(this, 'draggable', new Draggable( this, options ));
|
|
}
|
|
});
|
|
};
|
|
|
|
|
|
}(jQuery, window, document));
|
|
|
|
</pre>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="../assets/vendor/prettify/prettify-min.js"></script>
|
|
<script>prettyPrint();</script>
|
|
<script src="../assets/js/yui-prettify.js"></script>
|
|
<script src="../assets/../api.js"></script>
|
|
<script src="../assets/js/api-filter.js"></script>
|
|
<script src="../assets/js/api-list.js"></script>
|
|
<script src="../assets/js/api-search.js"></script>
|
|
<script src="../assets/js/apidocs.js"></script>
|
|
</body>
|
|
</html>
|