その他１２ ■面白■　複数画像をドラッグ移動

■画像をドラッグして、クリスマス・ツリーの飾り付けをどうぞ♪

画像をマウスでドラッグすると、画像が移動します。
画像といっても、クリスマス・ツリーのモミの木やドアや板壁やチェック柄のテーブルクロスはCSSで描いています。CSSの部分は移動できません。
複数画像のドラッグ移動の原本はマウスドラッグによるオブジェクト移動のサンプルから。
CSSの絵の描き方は、三角の描き方はKAYAC DESIGNER'S BLOGから。詳細はSRE BLOGから。チェック柄はatmarkITから。
ソースは３種類用意しました。
画像のドラッグ移動のJavaScript分のみ。CSSの絵のみ。そして二つを合わせた全ソース分です。

◆画像のドラッグ移動のJavaScript分◆
ソースの中でマウスの右クリックで『すべて選択』した後に、
再度右クリックして『コピー』

<!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>

</head>

<body>
<br><br>

<!--★ここからコピー-->
<!-★ここから移動する画像。この中ならimgの増減可能。 id="drag"必須--->
<div id="drag">
<img src="gatc10.png"><img src="gatc11.png"><img src="gatc12.png"><img src="mh5.gif"><img src="kc5.png"><img src="mh8.gif"><img src="kc6.png"><img src="kc7.png"><img src="kc8.png"><img src="kc9.png"><img src="kc10.png"><img src="kc11.png"><img src="kc12.png"><img src="kc13.png"><img src="kc14.png"><img src="an16.gif"><img src="an15.gif"><img src="pe11.gif"><img src="mh7.gif"><img src="xmas_m.png"><img src="an11.gif"><img src="an12.gif"><img src="an13.gif"><img src="an14.gif"><img src="pe5.gif"><img src="pe6.gif"><img src="pe7.gif"><img src="mh6.gif">
</div>
<!-★ここまで移動する画像--->

<script type="text/javascript">
<!--
/*==================================================================================
複数画像のドラッグ移動 By http://emk.name/dhtml/「マウスドラッグによるオブジェクト移動のサンプル」
===================================================================================*/
var cur = null;
document.onmousemove=function mouseMove(e) {
	if (!cur)
		return true;
		cur.style.left=e.pageX-offsetX+"px";
		cur.style.top=e.pageY-offsetY+"px";
 	return false;
}

function mouseDown(e) {
	cur = this;
		offsetX=e.pageX-parseInt(cur.style.left);
		offsetY=e.pageY-parseInt(cur.style.top);
	return false;
}

document.onmouseup=function mouseUp(e) {
	cur = null;
}

var objs=document.getElementById("drag").getElementsByTagName("img");
var i=0;
if (objs){
	for (i=0; i<objs.length; i++){
objs[i].style.position="relative";
objs[i].style.top =0+"px";
objs[i].style.left =0+"px";
objs[i].style.cursor="move";
objs[i].style.zIndex=100;
objs[i].onmousedown = mouseDown;
}
}
// -->
</script>
<!--★ここまでコピー-->

<br><br>
</body>
</html>

◆CSSの絵のソース◆
ソースの中でマウスの右クリックで『すべて選択』した後に、
再度右クリックして『コピー』

<!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>

<!--★ここからコピー。ここからCSSで描いた絵-->
<style type="text/css">
<!--
body{
background:repeating-linear-gradient(#b94 40px,#975 80px);/*★グラデーションの繰り返し指定*/
}

.tree_top,
.tree_middle,
.tree_bottom{
widht:0px;
height:0px;
border-radius: 100px;
position: absolute;
left: 60%;
}

.tree_end,
.box{
position: absolute;
left: 60%;
}

.door,
.door_knob{
position: absolute;
left: 10%;
}

/* top */
.tree_top{
border-bottom: solid 100px #092;
border-left: solid 100px transparent;
border-right: solid 100px transparent;
margin-left: -100px;
top: 100px;
}

/* middle */
.tree_middle {
border-bottom: solid 200px #072;
border-left: solid 200px transparent;
border-right: solid 200px transparent;
margin-left: -200px;
top: 160px;
}

/* bottom */
.tree_bottom {
border-bottom: solid 300px #052;
border-left: solid 300px transparent;
border-right: solid 300px transparent;
margin-left: -300px;
top: 240px;
}

/* end */
.tree_end {
width: 100px;
height:100px;
background:linear-gradient(#000,#740); /*★色の線形グラデーション */
margin-left: -50px;
top: 540px;
}

/* box */
.box{
width:100%; height:150px; color:#000; border:double 2px #fff; z-index:1;
background:             /*★ピンクのチェック柄指定*/
  repeating-linear-gradient(
    90deg,rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.3) 10px,
    transparent 10px, transparent 20px),
  repeating-linear-gradient(
    0deg, rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.3) 10px,
    transparent 10px, transparent 20px),
  #e9e;
top:640px;
margin-left:-60%;
}

/* door */
.door {
width:240px;
height:400px;
border:outset 10px #861;
background:repeating-linear-gradient(to left,#a82 30px,#873 60px);/*★縦のグラデーションの繰り返し指定*/
margin-left:10px;
top:140px;
}

/* knob */
.door_knob {
width:30px;
height:30px;
border-radius:50%;
background:linear-gradient(#740,#000); /*★色の線形グラデーション */
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2),
            0 -1px 1px rgba(255, 255, 255, 0.5) inset;
margin-left:30px;
top:330px;
}

/* rope */
hr.rope{position:absolute; top:100px; left:-10px; width:102%; height:1px;color:#000;background:#000;}

/* drag★移動する画像を並べる場所 */
#drag{width:100%; margin-top:150px; padding:20px;}
-->
</style>
<!--★ここまでCSSで描いた絵。bodyにもコピーがあります-->

</head>

<body>
<br><br>

<!--★ここからコピー。ここからCSSで描いた絵の位置指定-->
<hr class="rope">
<!--★注意!!★CSSで作成した形は、上に記述したモノが重なり方の一番下になります-->
<div class="box"></div>
<div class="tree_end"></div>
<div class="tree_bottom"></div>
<div class="tree_middle"></div>
<div class="tree_top"></div>
<div class="door"></div>
<div class="door_knob"></div>
<!--★ここまでコピー。ここまでCSSで描いた絵の位置指定-->

<br><br>
</body>
</html>

◆全ソース◆
ソースの中でマウスの右クリックで『すべて選択』した後に、
再度右クリックして『コピー』

<!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>

<!--★ここからコピー。ここからCSSで描いた絵-->
<style type="text/css">
<!--
body{
background:repeating-linear-gradient(#b94 40px,#975 80px);/*★グラデーションの繰り返し指定*/
}

.tree_top,
.tree_middle,
.tree_bottom{
widht:0px;
height:0px;
border-radius: 100px;
position: absolute;
left: 60%;
}

.tree_end,
.box{
position: absolute;
left: 60%;
}

.door,
.door_knob{
position: absolute;
left: 10%;
}

/* top */
.tree_top{
border-bottom: solid 100px #092;
border-left: solid 100px transparent;
border-right: solid 100px transparent;
margin-left: -100px;
top: 100px;
}

/* middle */
.tree_middle {
border-bottom: solid 200px #072;
border-left: solid 200px transparent;
border-right: solid 200px transparent;
margin-left: -200px;
top: 160px;
}

/* bottom */
.tree_bottom {
border-bottom: solid 300px #052;
border-left: solid 300px transparent;
border-right: solid 300px transparent;
margin-left: -300px;
top: 240px;
}

/* end */
.tree_end {
width: 100px;
height:100px;
background:linear-gradient(#000,#740); /*★色の線形グラデーション */
margin-left: -50px;
top: 540px;
}

/* box */
.box{
width:100%; height:150px; color:#000; border:double 2px #fff; z-index:1;
background:             /*★ピンクのチェック柄指定*/
  repeating-linear-gradient(
    90deg,rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.3) 10px,
    transparent 10px, transparent 20px),
  repeating-linear-gradient(
    0deg, rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.3) 10px,
    transparent 10px, transparent 20px),
  #e9e;
top:640px;
margin-left:-60%;
}

/* door */
.door {
width:240px;
height:400px;
border:outset 10px #861;
background:repeating-linear-gradient(to left,#a82 30px,#873 60px);/*★縦のグラデーションの繰り返し指定*/
margin-left:10px;
top:140px;
}

/* knob */
.door_knob {
width:30px;
height:30px;
border-radius:50%;
background:linear-gradient(#740,#000); /*★色の線形グラデーション */
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2),
            0 -1px 1px rgba(255, 255, 255, 0.5) inset;
margin-left:30px;
top:330px;
}

/* rope */
hr.rope{position:absolute; top:100px; left:-10px; width:102%; height:1px;color:#000;background:#000;}

/* drag★移動する画像を並べる場所 */
#drag{width:100%; margin-top:150px; padding:20px;}
-->
</style>
<!--★ここまでCSSで描いた絵。bodyにもコピーがあります-->

</head>

<body>
<br><br>
<p>■画像をドラッグして、クリスマスの飾り付けをどうぞ♪</p>

<!--★ここからコピー-->
<!--★ここからCSSで描いた絵の位置指定-->
<hr class="rope">
<!--★注意!!★CSSで作成した形は、上に記述したモノが重なり方の一番下になります-->
<div class="box"></div>
<div class="tree_end"></div>
<div class="tree_bottom"></div>
<div class="tree_middle"></div>
<div class="tree_top"></div>
<div class="door"></div>
<div class="door_knob"></div>
<!--★ここまでCSSで描いた絵の位置指定-->

<!-★ここから移動する画像。この中ならimgの増減可能。 id="drag"必須--->
<div id="drag">
<img src="gatc10.png"><img src="gatc11.png"><img src="gatc12.png"><img src="mh5.gif"><img src="kc5.png"><img src="mh8.gif"><img src="kc6.png"><img src="kc7.png"><img src="kc8.png"><img src="kc9.png"><img src="kc10.png"><img src="kc11.png"><img src="kc12.png"><img src="kc13.png"><img src="kc14.png"><img src="an16.gif"><img src="an15.gif"><img src="pe11.gif"><img src="mh7.gif"><img src="xmas_m.png"><img src="an11.gif"><img src="an12.gif"><img src="an13.gif"><img src="an14.gif"><img src="pe5.gif"><img src="pe6.gif"><img src="pe7.gif"><img src="mh6.gif">
</div>
<!-★ここまで移動する画像--->

<script type="text/javascript">
<!--
/*==================================================================================
複数画像のドラッグ移動 By http://emk.name/dhtml/「マウスドラッグによるオブジェクト移動のサンプル」
===================================================================================*/
var cur = null;
document.onmousemove=function mouseMove(e) {
	if (!cur)
		return true;
		cur.style.left=e.pageX-offsetX+"px";
		cur.style.top=e.pageY-offsetY+"px";
 	return false;
}

function mouseDown(e) {
	cur = this;
		offsetX=e.pageX-parseInt(cur.style.left);
		offsetY=e.pageY-parseInt(cur.style.top);
	return false;
}

document.onmouseup=function mouseUp(e) {
	cur = null;
}

var objs=document.getElementById("drag").getElementsByTagName("img");
var i=0;
if (objs){
	for (i=0; i<objs.length; i++){
objs[i].style.position="relative";
objs[i].style.top =0+"px";
objs[i].style.left =0+"px";
objs[i].style.cursor="move";
objs[i].style.zIndex=100;
objs[i].onmousedown = mouseDown;
}
}
// -->
</script>
<!--★ここまでコピー。コピー終わり-->

<br><br>
</body>
</html>

その他１２ ■面白■ 複数画像をドラッグ移動 UP日時 : 2014/11/03

その他１２ ■面白■　複数画像をドラッグ移動　　　　UP日時 : 2014/11/03