Fixes the jQuery UI Draggable bug revolving around dragged item getting offset when scrolling.
// ==UserScript==
// @name OutOfMilk.com Category-List Manager Scrolling Fix
// @version 0.1.4
// @description Fixes the jQuery UI Draggable bug revolving around dragged item getting offset when scrolling.
// @namespace https://greasyfork.org/en/users/15562
// @author Jonathan Brochu (https://greasyfork.org/en/users/15562)
// @license GPLv3 or later (http://www.gnu.org/licenses/gpl-3.0.en.html)
// @include http://outofmilk.com/ManageCategories.aspx*
// @include http://www.outofmilk.com/ManageCategories.aspx*
// @include https://outofmilk.com/ManageCategories.aspx*
// @include https://www.outofmilk.com/ManageCategories.aspx*
// @grant none
// ==/UserScript==
/***
* History:
*
* 0.1.4 Changes made:
* - Updated script for use with the repository [greasyfork.org].
* - No change made to the code.
* (2015-09-14)
* 0.1.3 Change made:
* - Added outofmilk.com as a possible domain for include URLs.
* (2015-04-02)
* 0.1.2 Changes made:
* - Fixed previously noted z-index issue. Now, everytime a category
* name is being dragged it is made the topmost element on the page.
* This is not the most elegant of solutions (i.e. re-check all
* z-indices everytime), but it is the best we can do considering
* we don't have control over the page.
* (2013-04-05)
* 0.1.1 Changes made:
* - Removed the unneeded library @include (jQuery v1.8.2), since now
* it conflicts anyway with the (new?) version of the library being
* used on the page.
* - Tweaked @include to allow for URL params and anchors.
* NOTE: The (probably updated) version of the jQuery library used by
* the site/page recently introduced issues with the z-order of
* items being dragged (i.e. the dragged item might disappear
* when scrolling, but it can be made to re-appear after being
* dragged all-the-way to the bottom and then back up the page).
* This issue still needs further investigation.
* (2013-04-02)
* 0.1.0 First implementation. (2013-02-17)
*
*/
(function() {
// constants
var USERSCRIPT_NAME = 'OutOfMilk.com Category-List Manager Scrolling Fix';
// reference some outside objects
window.console = window.console || (function() {
if (typeof(unsafeWindow) == 'undefined') return { 'log': function() {} };
return unsafeWindow.console;
})();
// re-implement jQuery.ui.draggable
if (jQuery.ui.draggable) {
jQuery.ui.draggable.prototype._mouseDrag = function(event, noPropagation) {
// Compute the helpers position
/* --> */ /* Added: */ var currentRelativeOffset = this._getRelativeOffset();
this.position = this._generatePosition(event);
this.positionAbs = this._convertPositionTo("absolute");
// Call plugins and callbacks and use the resulting position if something is returned
if (!noPropagation) {
var ui = this._uiHash();
if(this._trigger("drag", event, ui) === false) {
this._mouseUp({});
return false;
}
this.position = ui.position;
}
if(!this.options.axis || this.options.axis !== "y") {
/* Original line:
* this.helper[0].style.left = this.position.left + "px";
*
* Updated line, using currentRelativeOffset:
*/
/* --> */ this.helper[0].style.left = this.position.left + (this.offset.relative.left - currentRelativeOffset.left) + "px";
}
if(!this.options.axis || this.options.axis !== "x") {
/* Original line:
* this.helper[0].style.top = this.position.top + "px";
*
* Updated line, using currentRelativeOffset:
*/
/* --> */ this.helper[0].style.top = this.position.top + (this.offset.relative.top - currentRelativeOffset.top) + "px";
}
if($.ui.ddmanager) {
$.ui.ddmanager.drag(this, event);
}
return false;
};
}
// Unbind from previous draggable implementation
$(".draggableItem").draggable("destroy");
// Rebind to new implementation (as done in 'js/methods/categories/ManageCategories.js?v=...')
$(".draggableItem").draggable({ revert: true });
// 2013-04-04: Force every newly-clicked span.draggableItem to be the topmost item
// Reference: http://stackoverflow.com/questions/4755631/css-javascript-make-element-top-most-z-index-top-most-modal-element
try {
$('span.draggableItem').each(function(){
this.addEventListener('mousedown', function(){
var highest_index = 0;
$('[z-index]').each(function() {
if ($(this).attr('z-index') > highest_index) {
highest_index = $(this).attr('z-index');
}
});
$(this).attr('z-index', highest_index + 1);
}, false);
});
} catch(err) {
console.log(err);
}
})();