文字１１■実用■消したりドラッグできるメモ紙

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>文字１１■実用■消したりドラッグできるメモ紙</title>

<!--★ここからコピー-->
<style><!--
#waku{
position:absolute;/*★この１行は削除不可。後は好みで変更可能*/
top:100px;/*★メモ紙の表示位置。お好みで*/
left:250px;
width:300px;/*★メモ紙の横幅。お好みで*/ 
padding:10px; 
background:lightyellow; 
border:2px solid #edb; 
color:black;
font-size: 90%;
line-height:1.6;
cursor:move;/*★カーソルが移動の形*/
box-shadow:5px 5px 10px #888;
}

#bt{
position:fixed;/*★ボタンの位置固定。不要なら削除*/
top:70px;/*★ボタンの上からの位置*/
left:20px;/*★ボタンの左からの位置*/
}

#clo{   /*★×印の装飾*/
color:#000;/*★文字色　黒*/
cursor:pointer;/*★カーソルが手の形*/
font-weight:bold;/*★太字*/
font-size:130%;/*★文字サイズ*/
}
--></style>
<!--★ここまでコピー。bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー-->

<div id="waku" title="ドラッグで移動"><!--★メモ紙開始-->
<div style="text-align:right;"><span id="clo" title="閉じる">[×]</span></div>

<!--★メモ紙の文章ここから-->
<strong>メモ紙:</strong><br>
<p>マウスでドラッグすると移動します。<br>
メモ紙の[×]かボタンのCloseをクリックするとメモ紙が消え、Openボタンクリックでまた出現します。<br>
<img src="../image/ugoku.png"><br>
消えたメモ紙は、Openボタンをクリックすると消えた位置に再び表示され、Resetボタンを押すと、メモ紙は最初の位置に表示されます。<br><br>
このメモ紙は<a href="../link.html">リンク</a>を貼ったり画像を貼ったりも可能です。</p>
<!--★メモ紙の文章ここまで-->

</div><!--★メモ紙終了-->

<div id="bt"><!--★ボタン指定ここから。id指定は必須-->
<input type="button" value="Close" id="bt1" title="閉じる">
<input type="button" value="Open" id="bt2" title="再開">
<input type="button" value="Reset" id="bt3" title="元の位置へ">
</div><!--★ボタン指定ここまで-->

<script type="text/javascript"><!--
/*=====================================================================
消したりドラッグできるメモ紙　★2017/08/20
ドラッグ移動原本 By http://codaholic.org/?p=1071 (サイト名　Codaholic)
divの中のimgの移動 By　https://t87r.wordpress.com/2011/05/26/how-to-disable-events-related-to-mouse-and-click-of-a-particular-element-by-javascript/ (サイト名　t87r)
=======================================================================*/
(function (){  //即時関数で囲んでグローバル変数を消すため、この行はこのままで
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var box=$("waku");
function closeit(){box.style.visibility="hidden";}
function showit(){box.style.visibility="visible";}
function drag(){
var flag, x, y;
box.onmousedown=function(e){flag='on'; y=e.pageY-box.offsetTop; x=e.pageX-box.offsetLeft;}
document.onmouseup=function(){flag='off';}
document.onmousemove=function(e){if(flag==='on'){box.style.top=e.pageY-y+'px'; box.style.left=e.pageX-x+'px';}}
disableClickEvent(objs);
}
/*画像をマウス動作に反応させない*/
var objs=document.getElementById("waku").getElementsByTagName("img");
function disableClickEvent(objs){   
var i=0;
for (i=0; i<objs.length; i++){
objs[i].onmousedown=function (){return false;};
objs[i].onmouseup=function (){return false;};
objs[i].onmousemove=function (){return false;};
}
}
drag();
$("bt1").onclick=closeit;
$("bt2").onclick=showit;
$("bt3").onclick=function (){location.reload()};
$("clo").onclick=closeit;
}());//即時関数終了
//--></script>
<!--★ここまでコピー。終わり-->

</body>
</html>
文字１１■実用■消したりドラッグできるメモ紙 最終修正日 : 2017/08/20

　文字１１■実用■消したりドラッグできるメモ紙　　　　最終修正日 : 2017/08/20
