前提・実現したいこと
htmlとjsでwebページを作っています。
ボタンを押すとjsで□の枠が生成されます。
そして、四角の枠は移動とサイズ変更ができます。
その時に、移動した枠が別の枠と重なったら
重なった部分をなくすか、白く見えないようにしたいです。
ですが、方法がわからないので教えてください
該当のソースコード
<html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> <style> #diagramContainer { width:80%; height: 400px; border: 1px solid gray; } .div_blue { top:20px; position: absolute; height:80px; width: 80px; border: 1px solid blue; } .div_green { top:20px; position: absolute; height:80px; width: 80px border: 1px solid green; } </style> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all-min.js"></script> <script> var count=0; function mksqu(obj){ var name = obj.getAttribute("Id"); var are = "<div id=\"div_"+ name + "_" + count + "\" class=\"div_"+ name + "\" style=\"left:20px; top:10px;\"></div>"; //Resizeable and draggable var are = are +"<script> $(function() { $(\"#div_" + name + "_" + count + "\").resizable({ resize : function(event, ui) { jsPlumb.repaint(ui.helper);},handles: \"all\"}); jsPlumb.ready(function() { jsPlumb.draggable(\"div_" + name + "_" + count + "\", {containment:\"parent\", grid: [ 20, 20 ]}); }); } );</script>"; are = are + "<script>jQuery( function() { jQuery( \"#div_" + name + "_" + count + "\" ) . resizable( { grid: [ 20, 20 ], } ); } );</script>"; //grid // console.log(`div_blue_${count}`); $("#diagramContainer").append(are); var ele = document.getElementById("div_"+ name + "_" + count); var crea_ele=document.createElement("div"); crea_ele.setAttribute("id","div_"+ name + "_" + count); ele.addEventListener('mouseup',function position_get(){ var top = ele.getBoundingClientRect(); // console.log('x' + top.left); // console.log('y' + top.top); var posi = name + "_" + count +' x=' + top.left + /*'<br>' + */' y=' + top.top; crea_ele.innerHTML= posi; document.body.appendChild(crea_ele); },false); count = count + 1;} $( function() { $( "#diagramContainer" ).resizable(); } ); </script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js'></script> </head> <body> <input type="button" value="A" id="blue" onClick="mksqu(this)" /> <input type="button" value="B" id="green" onClick="mksqu(this)" /> <div id="diagramContainer"> </div> <div id="position"> </div> </body> </html>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。