|
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/ пере залил все файлы
|
Часовой пояс GMT +3, время: 04:11. |
|