drag & drop, mouseup
пишу фреймворк который перемещает элементы в определенный блок,
так вот задумался а как лучше определять вошел элемент в нужную область или нет , есть 2 варианта : 1. использовать document.elementFromPoint(clientX, clientY) 2. определить границы элемента и проверять зашел ли курсор в нужную область |
Цитата:
<!doctype html>
<html>
<head>
</head>
<body>
<div id="dragged" style=" top: 10px; width: 50px; height: 50px; background-color: #0f0; position: absolute;"></div>
<div id="target" style="position: absolute; border: 10px solid #f00; left: 50%; top: 40%; width: 100px; height: 100px; background-color: #f00;"></div>
<script type="text/javascript">
var oX, oY, elmousedowned = null;
document.getElementById('dragged').onmousedown = function( e ) {
e = e || window.event;
elmousedowned = e.target || event.srcElement;
oX = e.offsetX || e.layerX;
oY = e.offsetY || e.layerY;
elmousedowned.style.zIndex = 100;
}
document.onmousemove = function( e ) {
if ( elmousedowned ) {
e = e || window.event;
if ( e.pageX == null && e.clientX != null ) {
var html = document.documentElement;
var body = document.body;
e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0);
e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0);
}
elmousedowned.style.left = ( e.pageX - oX ) + "px";
elmousedowned.style.top = ( e.pageY - oY ) + "px";
// временно уберем перетаскиваемый элемент, что бы увидеть что под курсором
elmousedowned.style.display = 'none';
var el = document.elementFromPoint( e.pageX, e.pageY );
if ( el && el === document.getElementById('target') ) {
el.style.borderColor = "#00f";
} else {
document.getElementById('target').style.borderColor = "#f00";
}
elmousedowned.style.display = 'block';
}
}
document.onmouseup = function() {
if ( elmousedowned ) {
elmousedowned.style.zIndex = "";
elmousedowned = null;
}
}
</script>
</body>
</html>
|
Цитата:
просто у меня были сомнения насчет первого варианта как определить когда элемент просто держат на итоговым блоком но еще не произошло mouseup.. но как раз в вашем коде можно глянуть как это реализовано так что :thanks: |
а не сильно ли напряжно для браузера каждый раз менять при смещение на пик сель менять display
|
вот что у меня получилось
http://cyberua.16mb.com/drag&drop/ но проблема в том что когда элементов больше чем блок они выходят за его границы , как можно опередить когда нужно увеличивать его высоту или ширину? |
все проблему решил=)
|
не все таки от чужих идей не откажусь=)
если ставить height auto то не очень красиво=) |
Цитата:
Цитата:
[17.02.1972 15:33:22] JavaScript - http://cyberua.16mb.com/drag&drop/
Event thread: mousedown
Uncaught exception: DOMException: NO_MODIFICATION_ALLOWED_ERR
Error thrown at line 61, column 5 in <anonymous function: down>(e) in http://cyberua.16mb.com/drag&drop/drag_manager/drag.js:
e.target = e.target || e.srcElement;
called from line 20, column 6 in <anonymous function: onmousedown>(e) in http://cyberua.16mb.com/drag&drop/drag_manager/drag.js:
if(!action.down(e))
|
Цитата:
я у себя даже в ие7 проверял, там ток opacity не работает |
попробуйте еще раз http://cyberua.16mb.com/drag&drop/ пере залил все файлы
|
Цитата:
e.target = e.target || e.srcElement;сделай иначе: var target = e.target || e.srcElement; |
хм...
понял, но блин не пойму почему у меня на 3х компах даже в самых древних браузерах работает |
Цитата:
У меня браузер Opera 11.64 |
все поправил target и перевалил http://cyberua.16mb.com/drag&drop/ .
а проблему с высотой решил так
width_height:function( drop_elem){
var width_drop, height_drop, height, width, height_drag, width_drag;
if(action.auto){
drop_elem.style.height = "auto";
action.auto = "stop";
}
width_drop = drop_elem.offsetWidth;
height_drop = drop_elem.offsetHeight;
width_drag = drag.obj.offsetWidth + parseInt(getComputed(drag.obj).marginLeft);
width_drag += parseInt(getComputed(drag.obj).marginRight);
height_drag = drag.obj.offsetHeight + parseInt(getComputed(drag.obj).marginTop);
height_drag += parseInt(getComputed(drag.obj).marginBottom);
width = width_drop - width_drag * action.count;
height = height_drop - height_drag ;
if(width < width_drag && height < height_drag) action.auto = true;
}
|
cyber,
теперь с этим: e.which = e.which || e.button;таже трабла |
cyber,
не пытайся перезаписывать о объекта Event свойства, по спецификации они все readonly |
хм...
просто интересно что у вас за браузер?=) |
cyber,
яж написал выше, Opera 11.64 |
не увидел=)
и опять опера видет себя хуже ИЕ , щас поправлю=) |
Цитата:
|
Цитата:
return getComputedStyle(obj, null) || drag.obj.currentStyle;вот тут и ошибка getComputedStyle в ИЕ вызовет останов выполнения скриптов |
писать нужно так:
function getComputed (obj){
if ( obj.ownerDocument && obj.ownerDocument.defaultView ) {
return obj.ownerDocument.defaultView.getComputedStyle( obj, null );
} else if ( obj.currentStyle ) {
return obj.currentStyle;
}
return null;
}
|
а что значит
obj.ownerDocument.defaultView |
Цитата:
|
Цитата:
|
а если так
try{
return getComputedStyle(obj, null)
} catch(e){
return obj.currentStyle;
}
|
Цитата:
Цитата:
|
Цитата:
хм , а почитать есть что то про эту проверку на русском |
Цитата:
|
теперь вроде все поправил=)
http://cyberua.16mb.com/drag&drop/ |
Цитата:
|
Цитата:
|
кстати работает у вас ?=)
|
Цитата:
e.which = e.which || e.button; |
Цитата:
кстати firefox 3.6 в отличие от 13 я так понял больше отвечает спецификации.. потому что в 3.6 не работает а в 13 работает |
|
Цитата:
|
Цитата:
|
возник еще один вопрос, не хочу создавать новую тему поэтому напишу тут, мне нужно найти все элементы с атрибутом draggable, но перебирать
var all_tag = getElementsByTagName('*');
....
while(i--){
all_tag[i].getAttribute("draggable")
}
не очень хочется... если какие то другие варианты? и если нет то как оптимизировать ее? |
document.querySelectorAll('[draggable]');
в ИЕ7 работать не будет |
| Часовой пояс GMT +3, время: 11:32. |