Сообщение от devote
|
А кто мешает это юзать? вроде насколько мне помнится это и в ИЕ отлично работает, даже IE7 если не ошибавюсь.
<!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..
но как раз в вашем коде можно глянуть как это реализовано так что
