###前提、試したこと
400px x 200pxの.box__wrapperをクリックすると、
クリックした位置に.boxがfadeInしながら挿入されます。
ここまではなんとか自分で到達できました。
###現在の問題点
今はクリックすると前にクリックした.boxも新たにクリックした箇所に移動してしまいます。これは同じクラス名を使用しているために起こる問題だと思うのですが、これをどのように解消すれば良いか悩んでいます。
新たにクリックしても前にクリックして挿入された.boxはそのままに表示しておきたいです。
またもう一つなのですが、このままだとクリックするたびに.boxが増えていき、
画面を覆い尽くしてしまうので、クリックして挿入された.boxは挿入されてから3秒後にはfadeOutしながらremoveしたいと思っています。
まとめますとやりたいことは、
・新たにクリックしても前の.boxの位置はそのまま(新しい.boxは新たなクリックした箇所へ)
・クリックされて挿入された.boxは3秒後にfadeOutしながらremoveする
以上になりますが、ご返答どうかよろしくお願いします。
jsfiddleに該当のソースコードをアップしましたので、
ご活用いただければ幸いです。
https://jsfiddle.net/ululami/ounao8ex/1/
###該当のソースコード
javascript
1$(function(){ 2 $('.box__wrapper').on('click',function(e){ 3 var x = e.clientX; 4 var y = e.clientY; 5 var box = $('<div class="box"></div>').hide().fadeIn(1000); 6 $('.wrapper').append(box); 7 $('.box').css({'left':x,'top':y}); 8 }); 9});
css
1*{ 2 margin: 0; 3 padding: 0; 4} 5 6html,body{ 7 height: 100%; 8} 9 10.wrapper{ 11 width: 100%; 12 height: 100%; 13 display: flex; 14 justify-content: center; 15 align-items: center; 16} 17 18.box__wrapper{ 19 width: 400px; 20 height: 200px; 21 background: #ddd; 22 position: relative; 23} 24 25.box{ 26 position: absolute; 27 width: 30px; 28 height: 30px; 29 background: tomato; 30 box-shadow: 0 0 30px rgba(0,0,0,0.4); 31}
html
1<div class="wrapper"> 2 <div class="box__wrapper"> 3 </div> 4</div>
###補足情報(言語/FW/ツール等のバージョンなど)
jQuery 3.2.1
chorome 最新版
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/01/02 00:57