| 1 |
|
| 2 |
// Copyright (c) 2009 Katsuhisa Yuasa <berupon [at] gmail.com> |
| 3 |
// License http://www.opensource.org/licenses/mit-license.html |
| 4 |
|
| 5 |
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 |
var elems = null; |
| 16 |
|
| 17 |
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 |
if (attr) { |
| 27 |
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 |
}else { |
| 36 |
return clickedElement; |
| 37 |
} |
| 38 |
} |
| 39 |
|
| 40 |
var onMouseDownHandler = function(e) { |
| 41 |
clickedElement = Event.element(e); |
| 42 |
dragElement = getDragTarget(clickedElement); |
| 43 |
dragging = true; |
| 44 |
dragStartMousePos = Event.pointer(e); |
| 45 |
dragElementStartPos = [NaN0(parseInt(dragElement.style.left)), NaN0(parseInt(dragElement.style.top))]; |
| 46 |
|
| 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 |
Event.stop(e); |
| 54 |
}; |
| 55 |
|
| 56 |
this.attach = function(){ |
| 57 |
elems = getElementsByClassName('draggable'); |
| 58 |
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 |
endDrag(); |
| 67 |
}); |
| 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 |
endDrag(); |
| 82 |
}); |
| 83 |
|
| 84 |
|
| 85 |
}; |
| 86 |
|
| 87 |
|