Skip to content

Instantly share code, notes, and snippets.

@tmpvar
Created August 27, 2012 02:27
Show Gist options
  • Save tmpvar/3485103 to your computer and use it in GitHub Desktop.
Save tmpvar/3485103 to your computer and use it in GitHub Desktop.
drag.js - a blatantly minimal drag library for webkit based browsers
/*
drag.js - a blatantly minimal drag library for webkit based browsers
Licensed under the MIT -- copyright 2012 Elijah Insua <tmpvar@gmail.com>
*/
(function() {
var
element = null,
mapEntries = [],
mapping = {};
var on = function(name, handler) {
name.split(' ').forEach(function(e) {
document.addEventListener(e, handler, true);
});
// immediately update the cache
element && cacheMapping(element);
};
var cacheMapping = function(el) {
mapEntries = [];
Object.keys(mapping).forEach(function(selector) {
el.webkitMatchesSelector(selector) && mapEntries.push(mapping[selector]);
});
};
var emit = function(name, ev) {
if (!ev.clientX) {
ev.clientX = ev.targetTouches[0].clientX;
ev.clientY = ev.targetTouches[0].clientY;
}
mapEntries.forEach(function(options) {
options[name] && options[name](element, ev);
});
};
on('mousedown touchstart', function(ev) {
element = ev.target;
cacheMapping(element);
if (!mapEntries.length) {
element = null;
} else {
emit('start', ev);
}
});
on('mouseup touchend', function(ev) {
emit('end', ev);
element = null;
});
on('mousemove touchmove', function(ev) {
ev.preventDefault();
if (element) {
emit('move', ev);
}
});
window.drag = function(selector, options) {
mapping[selector] = options;
};
})();
(function(){var e=null,t=[],n={},r=function(t,n){t.split(" ").forEach(function(e){document.addEventListener(e,n,!0)}),e&&i(e)},i=function(e){t=[],Object.keys(n).forEach(function(r){e.webkitMatchesSelector(r)&&t.push(n[r])})},s=function(n,r){r.clientX||(r.clientX=r.targetTouches[0].clientX,r.clientY=r.targetTouches[0].clientY),t.forEach(function(t){t[n]&&t[n](e,r)})};r("mousedown touchstart",function(n){e=n.target,i(e),t.length?s("start",n):e=null}),r("mouseup touchend",function(t){s("end",t),e=null}),r("mousemove touchmove",function(t){t.preventDefault(),e&&s("move",t)}),window.drag=function(e,t){n[e]=t}})()
drag('.node', {
start : function(el, ev) {
console.log('started drag of', el, 'at coords (' + ev.clientX + ',' + ev.clientY + ')');
}
move : function(el, ev) {
console.log('dragging', el, 'at coords (' + ev.clientX + ',' + ev.clientY + ')');
}
end : function(el, ev) {
console.log('finished dragging', el, 'at coords (' + ev.clientX + ',' + ev.clientY + ')');
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment