SHOJI's Code
 仕事や趣味で書いた各種言語のプログラミングコード(エクセルVBA,PHP,C/C++/C#,JavaScript等)、その他雑記。
2017.08<<123456789101112131415161718192021222324252627282930>>2017.10
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

最近ブログなどの設定画面で、ドラッグ&ドロップが使われているものをよく見かける。ということでちょっとやってみる。
<html>
<head>
<style type="text/css">
.draggable {
color: blue;
text-decoration: underline;
}
#bucket {
padding: 4px;
border: 3px blue solid;
}
#dragbox {
display: block;
position: absolute;

color: blue;
text-decoration: underline;

background: cyan;
filter: alpha( style=0, opacity=70 );

visibility: hidden;
}
</style>

<script type="text/javascript">
<!--
var dragging = false;
var offsetX, offsetY;

function load()
{
var len = document.all.length;

for(i=0;i<len;i++)
if( document.all[i].className == "draggable" )
document.all[i].onmouseover = show_drag_obj;

document.getElementById("dragbox").onmousedown = start_dragging;
document.getElementById("dragbox").onmouseout = cancel_dragging;
document.onmousemove = move_drag_obj;
document.onmouseup = end_dragging;
}

function show_drag_obj()
{
if( dragging ) return true;

var o = document.getElementById("dragbox");

o.innerHTML = this.innerHTML;
o.style.left = this.offsetLeft;
o.style.top = this.offsetTop;
o.style.width = this.offsetWidth;
o.style.height = this.offsetHeight;
o.style.visibility = "visible";
}

function start_dragging()
{
var o = document.getElementById("dragbox");

o.style.cursor = "move";
offsetX = event.offsetX;
offsetY = event.offsetY;
dragging = true;
return false;
}

function cancel_dragging()
{
if( dragging ) return false;

var o = document.getElementById("dragbox");

o.style.cursor = "";
o.style.visibility = "hidden";
return false;
}

function move_drag_obj()
{
if( !dragging ) return false;

var o = document.getElementById("dragbox");

o.style.left = event.clientX - offsetX;
o.style.top = event.clientY - offsetY;
return false;
}

function end_dragging()
{
if( !dragging ) return false;

var o = document.getElementById("dragbox");
var b = document.getElementById("bucket");

if( isInBucket(event.clientX, event.clientY) )
b.innerHTML += o.innerHTML;

o.style.visibility = "hidden";
dragging = false;
}

function isInBucket(x,y)
{
var b = document.getElementById("bucket");

if( x >= b.offsetLeft && x <= b.offsetLeft + b.offsetWidth &&
y >= b.offsetTop && y <= b.offsetTop + b.offsetHeight )
{
return true;
}
return false;
}

//-->
</script>
</head>

<body onLoad="load();">
<span class="draggable">JavaScript</span>で
Drag&Dropする
<span class="draggable">テスト</span>を行ってみた。<br>
この例は文中の draggable クラスのエレメント
(<span class="draggable">青文字でアンダーラインの部分</span>)を
青いボックスにドラッグすると
青いボックスにその文字を追加していくというサンプルである。

<div class="draggable">divタグ</div>
<p class="draggable">これは pタグ</p>
<div>
divエレメント内の<span class="draggable">spanタグでも</span>いけるかな?
</div>

<div id="bucket"></div>
<div id="dragbox"></div>
</body>
</html>


IEでしか動かない。FireFoxでちょっとやってみたがドラッグできなかった。イベントの扱いの違いなどなのだろうが、まずは感じを掴みたかったので、とりあえずは、これでいいや(笑)

テーマ:JavaScript - ジャンル:コンピュータ
コメント
この記事へのコメント
コメントを投稿する

管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL
この記事へのトラックバック
copyright © 2004-2006 SHOJI, Powered By FC2ブログ all rights reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。