質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

1303閲覧

javescript 枠の重なりをなくしたい

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2018/07/14 14:55

前提・実現したいこと

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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

よくわからんけど、javascriptでスタイルを上書きするとかどうです?

投稿2018/08/26 00:13

bwz61366

総合スコア2009

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問