Drag&Drop или не Drag&Drop
У меня вопрос. Я пытаюсь самостоятельно учить JavaScript + CSS + HTML. Решил попробовать использовать drag and drop. То, что было написано в статье я понял, логику понял, но все это работает только с lib.js, содержимое которого я до конца понять не смог ( http://learn.javascript.ru/play/tuto...ple/index.html). Но я попробовал сделать сам и вот что вышло. Это вероятно говнокод, но ввиду того, что я нуб, понять почему именно не могу:
Код:
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<div class='drag' onmouseover = 'drag(this)'></div>
<div class='drag' onmouseover = 'drag(this)'></div>
<div class='drag' onmouseover = 'drag(this)'></div>
<div class='drag' onmouseover = 'drag(this)'></div>
<div class='drag' onmouseover = 'drag(this)'></div>
<style>
.drag {
cursor:move;
width:100px;
height:100px;
background:red;
position:absolute;
}
</style>
<script>
var int, top1, left, y, x, i = 0;
function drag(drag) {
drag.onmousedown = function (e) {
drag.innerHTML = 'objattached'
y = e.pageY - drag.offsetTop;
x = e.pageX - drag.offsetLeft;
window.onmousemove = function (e) {
drag.innerHTML = 'FATAL';
top1 = e.pageY - y;
left = e.pageX - x;
drag.style.top = top1 + 'px';
drag.style.left = left + 'px';
drag.innerHTML = 'objattached'
}
}
drag.onmouseup = function (e) {
drag.innerHTML = 'objdisattached';
window.onmousemove = function () {
drag.innerHTML = 'FATAL';
drag.style.top1 = top1 + 'px';
drag.style.left = left + 'px';
drag.innerHTML = 'objdisattached';
}
}
}
function preventSelection(element){
var preventSelection = false;
function addHandler(element, event, handler){
if (element.attachEvent)
element.attachEvent('on' + event, handler);
else
if (element.addEventListener)
element.addEventListener(event, handler, false);
}
function removeSelection(){
if (window.getSelection) { window.getSelection().removeAllRanges(); }
else if (document.selection && document.selection.clear)
document.selection.clear();
}
function killCtrlA(event){
var event = event || window.event;
var sender = event.target || event.srcElement;
if (sender.tagName.match(/INPUT|TEXTAREA/i))
return;
var key = event.keyCode || event.which;
if (event.ctrlKey && key == 'A'.charCodeAt(0))
{
removeSelection();
if (event.preventDefault)
event.preventDefault();
else
event.returnValue = false;
}
}
addHandler(element, 'mousemove', function(){
if(preventSelection)
removeSelection();
});
addHandler(element, 'mousedown', function(event){
var event = event || window.event;
var sender = event.target || event.srcElement;
preventSelection = !sender.tagName.match(/INPUT|TEXTAREA/i);
});
addHandler(element, 'mouseup', function(){
if (preventSelection)
removeSelection();
preventSelection = false;
});
addHandler(element, 'keydown', killCtrlA);
addHandler(element, 'keyup', killCtrlA);
}
preventSelection(document);
</script>
</body>
</html>
Заранее благодарю.
P.S. Если вы поясните что находится в fixEvent(), буду весьма признателен |