Posts Tagged ‘draggable’

    はてなブックマーク - [jQuery プラグイン]draggableの使い方
    このエントリーをはてなブックマークに追加

    アドベントカレンダーも最終日になりました。

    誕生日プレゼントに次いで、アンカーというクリスマスプレゼントまでもらってしまった、弊社安元に続いてまさかの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アドベントカレンダーエキストララウンド(!?)にご期待下さい?