アドベントカレンダーも最終日になりました。
誕生日プレゼントに次いで、アンカーというクリスマスプレゼントまでもらってしまった、弊社安元に続いてまさかの4回目の登場の萩原です。
まぁ今年はクリスマスは中止なわけですが
[jQuery プラグイン]draggableの使い方
今回はjQueryプラグイン、draggableの紹介をします。
draggableはその名の通り、divやsqpnなどのドラッグ&ドロップを簡単に実装できるプラグインです。
まずはこちらからjQuery UIをダウンロードします。
その中から以下のjsファイルを使用します。
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.mouse.js
jquery.ui.draggable.js
実際のコードを見てもらった方が早いと思うので早速コードを。
<script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery.ui.core.js"></script> <script type="text/javascript" src="jquery.ui.widget.js"></script> <script type="text/javascript" src="jquery.ui.mouse.js"></script> <script type="text/javascript" src="jquery.ui.draggable.js"></script> <script type="text/javascript"> $(function(){ $('div').draggable({ helper:'clone',//ドラッグ時に要素を複製する opacity:'0.5',//不透明度の指定 drag:function(){},//ドラッグ中 stop:function(){}//ドラッグ終了時 }); }) </script> <div style="border-color:black;border-style:solid;border-width:1px;width:50px;"> テスト </div>あああ |
draggableにはいくつもオプションが準備されていまして、ドラッグする時の要素の動きから、
ドラッグ中やドラッグ終了時に関数を指定することもできます。
関数の中ではthisを使うことでドラッグ中の要素を取得することもできますので、
DIVを左の枠から右の枠に移すと言った動きを作ることもできます。
(というか今回draggableを使用した目的がそれでした。)
他にもたくさんオプションが準備されていますので、多分一通りはできるのではないかと思います。
少しは役に立つかもしれない化学知識
毎度おなじみになってきた化学知識コーナー第4回です。
皆さんクロロホルムってご存知だと思います。
ドラマとか推理アニメとかバーローとかに出てくるあれです。
ハンカチにクロロホルムをしみこませて、かがせることで即おねんね、という描写が良くなられてますが、あれは大ウソです。
化学ではかなり一般的に使われるもので、主に水に溶けないものを溶かすことに使われています。
蒸発しやすく結構強烈な匂いがします。(少なくとも私は苦手です・・・)
まぁ匂いを把握していることからわかるとおり、嗅いだら即気絶するようなものじゃありません。
濃厚なクロロホルムを10分以上かぐと気絶したりするらしいですが・・・
何でクロロホルムがあんな扱いなのか不思議ですね。
昔麻酔に使われていたせいらしいですが・・・
あ、因みに絶対に試したりしないで下さいね。
発がん性とかありますし。
総括
最後なんで簡単に総括もさせていただきます。
アドベントカレンダーをご覧下さった皆さん、Fusicの皆さん、24日お疲れ様です。
感想としては、まず結構登場人物が割と偏っていたなぁという感じですね。
担当を決めるルーレットをテストしていた際は、特に偏ったりしていなかったようなのですが・・・
特に、企画者の小山が一人だけ当たらないという展開あり、4回当たりが二人もと・・・
社内もある意味スリリング(?)な24日でした。
内容も汎用的に使えそうなものから、なかなかコアなものまで多様な記事が登場しました。
記事の傾向から弊社の何某はどういった分野が得意か、等もわかったんじゃないかなと思います。
最後に
これで、Fusicアドベントカレンダーはおしまいです。
普段Fusicブログに登場しない人物も登場していい企画だったなと思います。
それではまたお会いしましょう。
Fusicアドベントカレンダーエキストララウンド(!?)にご期待下さい?