| 1 |
berupon |
4 |
|
| 2 |
berupon |
6 |
// Copyright (c) 2009 Katsuhisa Yuasa <berupon [at] gmail.com> |
| 3 |
|
|
// License http://www.opensource.org/licenses/mit-license.html |
| 4 |
|
|
|
| 5 |
berupon |
4 |
var Draggable = function() { |
| 6 |
|
|
var NaN0 = function (v){ |
| 7 |
|
|
return isNaN(v) ? 0 : v; |
| 8 |
|
|
}; |
| 9 |
|
|
var dragging = false; |
| 10 |
|
|
var dragStartMousePos = null; |
| 11 |
|
|
var dragElementStartPos = null; |
| 12 |
|
|
|
| 13 |
|
|
var clickedElement = null; |
| 14 |
|
|
var dragElement = null; |
| 15 |
berupon |
8 |
var elems = null; |
| 16 |
berupon |
4 |
|
| 17 |
berupon |
8 |
function endDrag() { |
| 18 |
|
|
dragging = false; |
| 19 |
|
|
clickedElement = null; |
| 20 |
|
|
dragElement = null; |
| 21 |
|
|
} |
| 22 |
|
|
|
| 23 |
|
|
function getDragTarget(elem) { |
| 24 |
|
|
var attr = elem.attributes.getNamedItem("dragtarget"); |
| 25 |
|
|
var ret = null; |
| 26 |
berupon |
4 |
if (attr) { |
| 27 |
berupon |
33 |
var s = new Selector(attr.value); |
| 28 |
|
|
do { |
| 29 |
|
|
if (s.match(elem)) { |
| 30 |
|
|
return elem; |
| 31 |
|
|
} |
| 32 |
|
|
}while (elem = elem.parentNode); |
| 33 |
|
|
alert("Draggable dragtarget not found!"); |
| 34 |
|
|
return null; |
| 35 |
berupon |
4 |
}else { |
| 36 |
berupon |
33 |
return clickedElement; |
| 37 |
berupon |
4 |
} |
| 38 |
berupon |
8 |
} |
| 39 |
|
|
|
| 40 |
|
|
var onMouseDownHandler = function(e) { |
| 41 |
|
|
clickedElement = Event.element(e); |
| 42 |
|
|
dragElement = getDragTarget(clickedElement); |
| 43 |
|
|
dragging = true; |
| 44 |
berupon |
4 |
dragStartMousePos = Event.pointer(e); |
| 45 |
|
|
dragElementStartPos = [NaN0(parseInt(dragElement.style.left)), NaN0(parseInt(dragElement.style.top))]; |
| 46 |
berupon |
8 |
|
| 47 |
|
|
var maxZIndex = 0; |
| 48 |
|
|
for (var i=0; i<elems.length; ++i) { |
| 49 |
|
|
var elem = getDragTarget(elems[i]); |
| 50 |
|
|
maxZIndex = Math.max(elem.style.zIndex, maxZIndex); |
| 51 |
|
|
} |
| 52 |
|
|
dragElement.style.zIndex = maxZIndex + 1; |
| 53 |
berupon |
4 |
Event.stop(e); |
| 54 |
|
|
}; |
| 55 |
|
|
|
| 56 |
berupon |
34 |
this.attach = function() { |
| 57 |
berupon |
8 |
elems = getElementsByClassName('draggable'); |
| 58 |
berupon |
4 |
for (var i=0; i<elems.length; ++i) { |
| 59 |
|
|
var elem = elems[i]; |
| 60 |
|
|
Event.observe(elem, 'mousedown', onMouseDownHandler); |
| 61 |
|
|
} |
| 62 |
|
|
}; |
| 63 |
|
|
Event.observe(window, 'load', this.attach); |
| 64 |
|
|
|
| 65 |
|
|
Event.observe(document, 'mouseup', function(){ |
| 66 |
berupon |
8 |
endDrag(); |
| 67 |
berupon |
4 |
}); |
| 68 |
|
|
Event.observe(document, 'mousemove', function(e){ |
| 69 |
|
|
if (!dragging) { |
| 70 |
|
|
return; |
| 71 |
|
|
} |
| 72 |
|
|
var curMousePos = Event.pointer(e); |
| 73 |
|
|
if (curMousePos.x < 0 || curMousePos.y < 0) { |
| 74 |
|
|
return; |
| 75 |
|
|
} |
| 76 |
|
|
var diffMousePos = [curMousePos.x-dragStartMousePos.x, curMousePos.y-dragStartMousePos.y]; |
| 77 |
|
|
dragElement.style.left = dragElementStartPos[0] + diffMousePos[0] + "px"; |
| 78 |
|
|
dragElement.style.top = dragElementStartPos[1] + diffMousePos[1] + "px"; |
| 79 |
|
|
}); |
| 80 |
|
|
Event.observe(document, 'blur', function(){ |
| 81 |
berupon |
8 |
endDrag(); |
| 82 |
berupon |
4 |
}); |
| 83 |
|
|
|
| 84 |
|
|
|
| 85 |
|
|
}; |
| 86 |
|
|
|
| 87 |
|
|
|