потерял onmouseUP в div-е содержащем object c svg картинкой

[Герасим]

Здравствуйте!
осваиваю 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;

[Dilettante_Pro]

Герасим,
Прежде всего, id должен быть уникальным

[Dilettante_Pro]

Хотя и с одинаковым id все равно работает (т.к. он не используется в коде?)

<style>
.mdiv {
   width:20px;
   height:20px;
   border:1px solid black;
   border-radius:50%;
}
</style>
<div class="svg_div_block">
	<div id="ball" class="dragable_div">
	  <div id="svg_source" class="mdiv">
          <object id="svg_source" type="image/gif" data="https://javascript.ru/forum/images/smilies/smile.gif"> </object>
            </div>
	</div>
</div>
<script>
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;
        }
</script>

[Герасим]

да, когда с GIF работает (и с jpg, png проверил - работает).
значит дело в SVG, с ним не работает, мышь залипает не срабатывает onmouseup
Если убираю obj.style.position = 'absolute'; то эффект залипания мыши пропадает (можно дропать) но захваченный элемент перемещается только внутри своего DIVa, а не по все странице

[Герасим]

плиз помогите понять где и в каком месте я mouseup потерял?

[Dilettante_Pro]

Если тыкать мышь на svg, то не работает. Если на бордер - более-менее работает.
Причем у круглого бордера активны только четыре верхних-нижних-левых-правых точек - остальное перекрыто квадратным внутренним #document

<style>
object {
      border:4px solid black;
      height:82px;
      width:82px;
      border-radius:50%;
}
</style>
<body>
          <object id="ball" type="image/svg+xml"  data="https://js.cx/clipart/ball.svg"> </object>

</body>
<script>
	
var ball = document.getElementById('ball');
// ball.onload = function() {
// var image = ball.contentWindow.document.querySelector('svg');
//     image.onmousedown = function() {
//          return false;
//     }
// }
ball.onmousedown = function(e) {

  ball.style.position = 'absolute';
  document.body.appendChild(ball);
  moveAt(e);

  ball.style.zIndex = 1000; // над другими элементами

  function moveAt(e) {
    ball.style.left = e.pageX - ball.offsetWidth / 2 + 'px';
    ball.style.top = e.pageY - ball.offsetHeight / 2 + 'px';
  }

  document.onmousemove = function(e) {
    moveAt(e);
  };

  ball.onmouseup = function() {
    document.onmousemove = null;
    ball.onmouseup = null;
  };

}

ball.ondragstart = function() {
  return false;
};
</script>

Можно было бы попробовать поиграть с содержимым object (например, строки 10-15), но кроссдоменный запрет...
А без object svg себя прекрасно ведет... https://learn.javascript.ru/drag-and-drop

[Dilettante_Pro]

Поиграл с однодоменным вариантом svg в object - утешительного мало.
Можно подавить паразитные перемещения svg мышью, но все равно object можно перемещать, только указав на border - внутренний #document перекрывает всю внутреннюю часть object.
Так что используйте svg непосредственно, без вкладывания его в object.