DragDrop.destroy - ドラッグ＆ドロップを終了
スポンサードリンク
この機能を実行するにはscriptaculousが必要です
構文
DragDrop.destroy()
引数: =
「ドラッグ＆ドロップを終了」サンプルコード
| 1 | <html> |
| 2 | |
| 3 | <head> |
| 4 | <title>DragDrop.destroy - ドラッグ＆ドロップを終了</title> |
| 5 | </head> |
| 6 | |
| 7 | |
| 8 | <!--ドラッグ＆ドロップを終了のサンプル--> |
| 9 | <script type="text/javascript" src="/js/prototype.js"></script> |
| 10 | <script type="text/javascript" src="/js/scriptaculous.js"></script> |
| 11 | <script type="text/javascript"> |
| 12 | <!-- |
| 13 | var dragdrop; |
| 14 | window.onload = function() { |
| 15 | dragdrop = new Draggable("dragdrop", { |
| 16 | handle: "handle", // ドラッグハンドル(指定した場合、ここをクリックしたときのみＤ＆Ｄ可能に） |
| 17 | revert:false, // 移動後元に戻すかどうか true: 戻す, false: 戻さない |
| 18 | // zIndex:10000, // Z-Index値 |
| 19 | // constraint: "horizontal", // 移動制限 horizontal:水平位置限定, vertical:垂直位置限定 |
| 20 | starteffect: function() { // ドラッグ開始時によばれる関数 |
| 21 | $('message').innerHTML = "started"; |
| 22 | }, |
| 23 | endeffect: function() { // ドラッグ終了時に呼ばれる関数 |
| 24 | $('message').innerHTML = "ended"; |
| 25 | } |
| 26 | }); |
| 27 | } |
| 28 | function execute() { |
| 29 | dragdrop.destroy(); |
| 30 | $('ebutton').innerHTML = '停止しました'; |
| 31 | } |
| 32 | //--> |
| 33 | </script> |
| 34 | <body> |
| 35 | <form> |
| 36 | <div id="dragdrop" style="width:300px;height:300px;background-color:red"> |
| 37 | <div id="handle" style="background-color:green;cursor:cross">handle</div> |
| 38 | <div id="message"></div> |
| 39 | </div> |
| 40 | <button onclick="execute()" id="ebutton">ドラッグ停止</button> |
| 41 | |
| 42 | </body> |
| 43 | |
| 44 | </html> |
| ポップアップ | 印刷 | ←ポップアップでソースコードを開き、簡単にコピーできます | ? |
スポンサードリンク
忘却曲線を使って「DragDrop.destroy」を確実に記憶に残す「DragDrop.destroyの動作デモ」
新しいウィンドウで実行 | スクリプトを編集＆実行 - スクリプトをWEB上で編集＆動作確認することが出来ます。
関連ページ
スポンサードリンク