Drag and Drop file handler

This little script makes list items selectable and draggable. I'm pretty new to programming in general, and even more so to Javascript. Most of my background is in PHP and some C++. On the large, I don't think this is the proper way to be writing code in JavaScript. I know global variables are bad, but I'm not used to dealing with event handling, I don't know how to maintain constants like that throughout various event calls that aren't otherwise attached to each other. I'm really not sure if I'm doing any of this right.

A more specific question - This script works as is, but if i change handleDragStart()'s variable dragSrc = this; into var dragSrc = this; as it should be, it breaks. When the handleDrop() event fires, it returns dragSrc is not defined. If anything, I would expect this behavior with the way it is written now, not after adding var. I'm a little lost.

```
var SELECTED_CLASS_CONST = 'selected';
var DROP_CLASS_CONST = 'drophover';

function handleDragStart(e) {

dragSrc = this;

e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
}

function handleDragEnter(e) {

this.addClass(DROP_CLASS_CONST);
}

function handleDragLeave(e) {

this.removeClass(DROP_CLASS_CONST);
}

function handleDragEnd(e) {

[].forEach.call(draggables, function(drag) {

drag.removeClass(DROP_CLASS_CONST);
});
}

function handleDragOver(e) {

if (e.preventDefault) {
e.preventDefault();
}
e.dataTransfer.dropEffet = 'move';

return false;
}

function handleDrop(e) {

if (e.stopPropagation)
{
e.stopPropagation();
}

if ( dragSrc != this )
{
dragSrc.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
this.removeClass(DROP_CLASS_CONST);

if (dragSrc.hasClass(SELECTED_CLASS_CONST) && this.hasClass(SELECTED_CLASS_CONST))
{ return; }
else { swapClass(dragSrc, this, SELECTED_CL

Edit: I missed that you were talking about the HTML5 drag and drop stuff, but I think this still kind of applies, so I'll leave it here for now. The idea is to "namespace" stuff into a singleton object.

The usual approach is to use a singleton object and attach all those functions and variables to it as properties.

You might try something like this, for example.

// mouse input stuff

var mouseInput = {};

// grab (start dragging) a node
mouseInput.grab = function(node, x, y) {
    this.activeNode = node;
    node.style.position = 'relative';
    node.style.left = '0px';
    node.style.top = '0px';
    node.style.zIndex = '10';
    this.lastX = x;
    this.lastY = y;
    this.lastLeft = 0;
    this.lastTop = 0;
};

// drag a node
mouseInput.drag = function(x, y) {
    if (!this.activeNode) return;
    this.lastLeft -= (this.lastX - x);
    this.lastTop -= (this.lastY - y);
    this.activeNode.style.left = this.lastLeft + 'px';
    this.activeNode.style.top = this.lastTop + 'px';
    this.lastX = x;
    this.lastY = y;
};

// drop (stop dragging) a node
mouseInput.drop = function(x, y) {
    if (!this.activeNode) return;
    this.activeNode.style.zIndex = null;
    this.activeNode.style.left = null;
    this.activeNode.style.top = null;
    this.activeNode.style.position = null;
    this.activeNode = null;
};

If you prefer, every this can be replaced with mouseInput.

StackExchange Code Review Q#8906, answer score: 2