buttondrag
エレメントをマウスでドラッグ＆ドロップ
定義クラス
- buttondrag
- エレメントをマウスでドラッグ＆ドロップさせる
(リファレンス)
サポート・ブラウザ
- Internet Explorer 6 for Windows ( 5 でもいけるはず）
- Opera 7.6 for windows
- Firefox 1.0 以上 for Windows
特徴
- エレメントをマウスのドラッグ＆ドロップで移動させることができるようになります
- 移動先を指定します。
- いくつかのイベント関数を設定するだけ
用例
<![CDATA[<script src="xbrowser.js"></script>
<script src="buttondrag.js"></script>
<table border=1>
<td id="to">to</td>
<td id="from">from<div id="buttondrag" class="buttondrag">can drag</div></td>
</tr></table>
<script>
buttondrag.onDragdrop=function(start,into){
if( into && start ) into.appendChild( start );
}
function init(){
var containers = ['to','from'];
var draggables = ['buttondrag'];
buttondrag.init( draggables, containers );
}
init();
</script>
<style>
.buttondrag{
border:2px solid #fff;
cursor:move;
background:#eee;
display:block;
width:180px;
-moz-user-select: none;
}
.dragover{ border:2px solid #f00; }
.dragging{ border-colir:red; }
</style>
]]>
リファレンス
リファレンス
ダウンロード
buttondrag.js