Здравствуйте!
осваиваю Drag'n'Drop по классическим примерам в т.ч. с этого сайта.
<div class="svg_div_block">
<div id="ball" class="dragable_div">
<div id="svg_source" class="mdiv"> </div>
<object id="svg_source" type="image/svg+xml" data="img/led2.svg"> </object>
</div>
</div>
на событие onmousedown с последующим onmousemove двигаю div-ом с id="ball" (в который вложены div id="svg_source" и svg картинка в object id="svg_source" )
Если я комментирую object id="svg_source", то классический пример срабатывает, и на onmouseup перетаскивание заканчивается.
Но как только появляется object id="svg_source", то в обработчик onmouseup больше не вхожу при отпускании левой кнопки мыши.
Где грабли? подскажите пожалуйста.
var dragObject = null;
var ball = document.getElementById('ball');
function moveAt(e) {
dragObject.style.left = e.pageX - dragObject.offsetWidth / 2 + 'px';
dragObject.style.top = e.pageY - dragObject.offsetHeight / 2 + 'px';
}
document.onmousemove = function(e) {
if (dragObject !== null) moveAt(e);
document.activeElement = dragObject;
return false;
}
document.onmouseup = function(e) {
alert("UP");
if (dragObject !== null) alert("UP");
}
ball.onmousedown = function(e) { // 1. отследить нажатие
if (e.which != 1) return false;//только левой кнопки мыши
dragObject = this;
dragObject.style.position = 'absolute';//подготовить к перемещению 2. разместить на том же месте, но в абсолютных координатах
document.body.appendChild(dragObject);// переместим в body, чтобы мяч был точно не внутри position:relative
dragObject.style.zIndex = 1000; // показывать мяч над другими элементами
return false;
}
// 4. отследить окончание переноса
ball.onmouseup = function(e) {
alert("UP");
document.onmousemove = null;
ball.onmouseup = null;
dragObject = null;