Tengo un código para el elemento arrastrable.

 var offsetX; var offsetY; Element.prototype.makeDraggable=function(){ var o=this o.onmousedown=function(e){ offsetX=e.pageX-parseInt(o.style.left) offsetY=e.pageY-parseInt(o.style.top) document.onmousemove=function(e) { o.style.left=Math.min(Math.max(e.pageX-offsetX,o.parentNode.clientWidth-o.clientWidth),0)+'px'; o.style.top=Math.min(Math.max(e.pageY-offsetY,o.parentNode.clientHeight-o.clientHeight),0)+'px'; } document.onmouseup = function(e) { document.onmousemove=o.onmouseup=null } } o.ondragstart = function(){return 0} } document.getElementById('object1').makeDraggable(); let spot = document.querySelectorAll('#grid-holder > div'); for(var i = 0; i < spot.length; i ++) { spot[i].onclick = function(){ inventar(); }; } function inventar() { alert(); }

 <div id="parent"> <div id="object1" style="left: 1px; top: 1px;"> <div class="grid-holder" id="grid-holder"> <div></div><div></div><div></div> <div></div><div></div><div></div> <div></div><div></div><div></div> <div></div><div></div><div></div> <div></div><div></div><div></div> <div></div><div></div><div></div> <div></div><div></div><div></div> <div></div><div></div><div></div> </div> </div> </div>

Cuando hago clic en #grid-holder> div, tengo un mensaje de alerta, pero ¿cómo evitar esta acción cuando arrastro el elemento #object1 manteniendo el elemento de los niños?