使って画面上にある任意の要素をマウスドラッグできるようにするサンプルを作ってみましたので、ぜひ参考にしてください。下のサンプルを試してみてください。<サンプル>下の要素(青いボックス)をマウスの左ボタンで押し、そのままマウスを移動すると要素がマウスの動きに合わせて移動します。サンプルコードコードは難しいものではありません。ポイントは要素をクリックしたマウスポインタの位置と要素の基準位置のズレを修正しているところです。posY1));}});});HTML青いBOXは「DIV」要素で作られています。id="test_box">クリック</div></body>CSSポイントは要素の基準(position)を「absolute」に設定しているところと、ページのマージンを「0px」にしているところです。この2点の設定がないとマウスポインタと要素の位置にズレが出てしまいます。今回のスクリプトには、まだドラッグ中(要素の移動中)に画面をスクロールさせると、マウスポインタと青いBOX要素の位置関係がズレてしまう問題が残っているので、完成させるにはその修正が必要になるでしょう。使って画面上にある任意の要素をマウスで移動できるようにするサンプルスクリプトを作ってみましたので、マウスで要素を移動する方法が今ひとつわからない場合は今回のサンプルを参考にしてください。それでは、まず下のサンプルを試してみてください。<サンプル>下の青いボックス要素をクリックすると要素とマウスポインタが固定され、マウスの動きに合わせて要素が移動するようになります。マウスポインタに要素が固定された状態でもう一度クリックすると、今度はその場所に要素を置くことができます。サンプルコードコードはそれほど難しいものではありません。ポイントは要素をクリックしたマウスポインタの位置と要素の基準位置のズレを修正しているところです。posY1));}});});HTML青いBOXは「DIV」要素で作られています。id="test_box">クリック</div></body>CSSポイントは要素の基準(position)を「absolute」に設定しているところと、ページのマージンを「0px」にしているところです。この2点の設定がないと正常に動作しません。今回は、クリックすることで要素の移動と固定を切り替えましたが、コードを少し変更するだけで「ドラッグ」動作に対応させることもできますので、次回以降にその方法を説明したいと思います。~jQueryで要素を非表示にするには「hide()」メソッドを使用します。コードボタン(id=btn)を押すと要素(id=youso)が非表示になります。World※このページの読み込みが完了してから試してください。要素にダブルクリックイベントを設定する方法jQueryjQueryで要素にダブルクリックイベントを設定するjQueryを使って要素にダブルクリックイベントを設定するには「.dblclick()」を使用します。()内には実行したいスクリプトを記述します。ソース「btn」というIDが付いたボタン要素をダブルクリックすると「olympic」というIDが付いた要素の内側のhtmlを書き換えます。type="text/javascript">$(function(){$("#btn").dblclick(function(){$("#dinner").html("<strong></strong>");});});</script>HTMLHTMLは「input」ボタン要素と「div」要素で構成されています。/>サンプルの実行ボタンを押すとボタン上部に回答が表示されます。要素にクリックイベントを設定する方法jQueryjQueryで要素にクリックイベントを設定するjQueryを使って要素にクリックイベントを設定するには「.click()」を使用します。()内には実行したいスクリプトを記述します。ソース「btn」というIDが付いたボタン要素をクリックすると「tenki」というIDが付いた要素の内側のhtmlを書き換えます。type="text/javascript">$(function(){$("#btn").click(function(){$("#tenki").html("<strong>晴れ</strong>");});});</script>HTMLHTMLは「input」ボタン要素と「div」要素で構成されています。/>サンプルの実行ボタンを押すとボタン上部のテキストが変わります。要素をフェードインさせる方法jQueryjQueryで要素をフェードインさせるjQueryで要素をフェードインさせるには「fadeIn」にスピードを設定して使用します。ソース「fadein_btn」というIDが付いたボタン要素をクリックすると「test_hako」というIDが付いた要素が5秒でフェードインします。フェードイン});});</script>HTMLHTMLは「input」要素と「div」要素で構成されています。id="test_hako">箱</div>CSSCSSではフェードインする「test_hako」要素のスタイルを設定しています。middle;}サンプルの実行ボタン「BUTTON」を押すと黄緑色のボックスが5秒かけてフェードインします。要素のCSSを変更する方法jQueryjQueryで要素のCSSを変更するには「css」にプロパティ名と値を設定します。ソース「test-botan3」というIDが付いた要素をクリックすると「sample27」というIDが付いた要素の背景色をCSSで黄色に変更しています。type="text/javascript">$(function(){$("#test-botan3").click(function(){$("#sample27").css("background","yellow");});});</script>HTMLHTMLは「input」要素と「div」要素で構成されています。id="sample27">上のボタンを押すとこのテキスト行の背景色が黄色に変更されます。</div>サンプルの実行ボタン「BUTTON」を押すとボタンの下にあるテキスト行の背景色が黄色に変更されます。上のボタンを押すとこのテキスト行の背景色が黄色に変更されます。~指定した日付の曜日を取得するには「getDay」メソッドを使用します。曜日は0~6の数値で返されます。サンプルコード」を使用して出力されています。~1970年1月1日0時0分0秒から現在までの経過時間をミリ秒で取得するには「Date.now()」メソッドを使用します。サンプルコード」を使用して出力されています。~文字列をJavaScriptコードとして評価するには「eval」関数を使用します。サンプルコード」を使用して出力されています。~数値の小数点以下を切り捨てるには「Math.floor」関数を使用します。サンプルコード」を使用して出力されています。~数値を小数点以下で四捨五入するには「Math.round」関数を使用します。数値「a」を小数点以下で四捨五入した結果(整数)を返す。サンプルコード」を使用して出力されています。~乱数を発生させるには「Math.random」関数を使用します。乱数は浮動小数点で発生します。サンプルコード」を使用して出力されています。~ある数値の絶対値を求めるには「Math.abs()」関数を使用します。絶対値とは「符号」を無視して得られる値です。サンプルコード」を使用して出力されています。~ある文字列の特定の位置から最後までの文字を取得するには、引数を一つにして「slice」メソッドを使用します。サンプルコード」を使用して出力されています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。