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;
this.lastLeft = newLeft;
this.lastTop = newTop;
};
// 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.