Drag and drop from scratch using JavaScript

An example code to implement drag-ability in to an HTML element from scratch without using JavaScript library.

JavaScript functions to provide drag-ability:

function DDElement(ele, event) {
    addEvent(ele, "mousedown", downHandler, true);
    addEvent(document, "mouseup", upHandler, true);

    if (event.stopPropagation)
        event.stopPropagation();
    else
        event.cancelBubble = true;

    if (event.preventDefault)
        event.preventDefault();
    else
        event.returnValue = false;

    function upHandler(e) {
        e = e || window.event;
        removeEvent(document, "mousemove", moveHandler, true);

        if (e.stopPropagation)
            e.stopPropagation();
        else
            e.cancelBubble = true;
    }

    function downHandler(e) {
        e = e || window.event;
        addEvent(document, "mousemove", moveHandler, true);
    }

    function moveHandler(e) {
        e = e || window.event;

        var pos = getCursorPosition(e);

        ele.style.left = (pos.x - 50) + "px";
        ele.style.top = (pos.y - 5) + "px";

        if (e.stopPropagation)
            e.stopPropagation();
        else
            e.cancelBubble = true;
    }
}

function getCursorPosition(e) {
    e = e || window.event;

    var pos = {x:0, y:0};

    if (e.pageX || e.pageY) {
        pos.x = e.pageX;
        pos.y = e.pageY;
    } else {
        var de = document.documentElement;
        var b = document.body;
        pos.x = e.clientX + (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
        pos.y = e.clientY + (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
    }

    return pos;
}

HTML element to provide drag-ability:

    
Handler
    

        Drag Content
    

Uses: Calling drag and drop on window load:

window.onload = function () {
     DDElement(document.getElementById('dragndrop'));
};

Cross browser event listener

Sometimes, we need to attach or detach an action with an element for specific event where listener function depends on browser. By using following code snippet anyone can do that in all browsers:

function addEvent(obj, evType, fn, useCapture) {
    useCapture = (useCapture === undefined ? false : useCapture);

    if (obj.addEventListener) {
        obj.addEventListener(evType, fn, useCapture);
    } else if (obj.attachEvent) {
        obj.attachEvent("on" + evType, fn);
    } else {
        obj['on' + evType] = fn;
    }
}
// Use: addEvent(element, 'mousemove', function_name);

function removeEvent(obj, evType, fn, useCapture) {
    useCapture = (useCapture === undefined ? true : useCapture);

    if (obj.removeEventListener) {
        obj.removeEventListener(evType, fn, useCapture);
    } else if (obj.detachEvent) {
        obj.detachEvent("on" + evType, fn);
    } else {
        obj['on' + evType] = fn;
    }
}
// Use: removeEvent(element, 'mousemove', function_name);

Find mouse pointer position using JavaScript

Sometimes we need to know the mouse cursor position to perform a certain action at that place.

For example, I need to show up a popup div near the mouse cursor position when user click over a particular field/link. You can get the mouse cursor position using following codes:

function getCursorPosition(e) {
    e = e || window.event;

    var pos = {x:0, y:0};

    if (e.pageX || e.pageY) {
        pos.x = e.pageX;
        pos.y = e.pageY;
    } else {
        var de = document.documentElement;
        var b = document.body;
        pos.x = e.clientX + (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
        pos.y = e.clientY + (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
    }

    return pos;
}

Uninitialized constant ActiveSupport::Dependencies::Mutex (NameError)

This error may occur to run older Rails application for conflicting with rubygems version. After a long googling I've come out in to following three solutions:

Using Bundler.:
Click here if you are interested to see the solution.

Changing rubygems version:

• Downgrade the rubygems to an earlier version using gem update --system {version}
• Add "require 'thread'" in to - Rakefile, script/server and config/environment.rb

Upgrade Rails:
Upgrade application in to Rails 3 though it's very hard to do for existing/running rails application.

For me, I was trying to run Rails 2.3.5 application where my system had rubygems 1.8.2. I've changed the rubygems version in to 1.7.2 as mentioned above and everything works fine.

Undefined local variable or method `version_requirements' for ...

I was getting the error while installing an older rails application. After googling I've got the solution from a discussion thread to add following block in right before the initialization in to config/environment.rb and worked for me.

if Gem::VERSION >= "1.3.6"
  module Rails
    class GemDependency
      def requirement
        r = super
        (r == Gem::Requirement.default) ? nil : r
      end
    end
  end
end