javascript & ajax samples to improve your web development.
トップページ
/ JavaScriptオンラインエディタ
JavaScriptオンラインエディタ
スクリプトを入力ボックスに書いて「スクリプト実行」ボタンを押すとWEB上でJavaScriptを実行&動作確認できます。
<script type="text/javascript" src="/js/prototype.js"></script> <script type="text/javascript" src="/js/scriptaculous.js"></script> <script type="text/javascript"> <!-- var dragdrop; window.onload = function() { dragdrop = new Draggable("dragdrop", { handle: "handle", // ドラッグハンドル(指定した場合、ここをクリックしたときのみD&D可能に) revert:true, // 移動後元に戻すかどうか true: 戻す, false: 戻さない // zIndex:10000, // Z-Index値 // constraint: "horizontal", // 移動制限 horizontal:水平位置限定, vertical:垂直位置限定 starteffect: function() { // ドラッグ開始時によばれる関数 $('message').innerHTML = "started"; }, endeffect: function() { // ドラッグ終了時に呼ばれる関数 $('message').innerHTML = "ended"; } }); Droppables.add("dropzone", { onDrop: function() { alert('ドロップされました'); } }); } //--> </script> <body> <form> <div id="dragdrop" style="width:50px;height:50px;background-color:red"> <div id="handle" style="background-color:green;cursor:cross">handle</div> <div id="message"></div> </div> <hr> <div id="dropzone" style="width:300px;height:300px;background-color:blue;color:white">ここにドロップ</div> </body>
スクリプト実行結果が表示されます。