Javascriptをはじめ、Ajax、jQueryの著書多数のガイドが、何かと最近騒がれているJa…
デジタル関連コミュニティ
北欧好きが、愛用の北欧モノを見せ合うコミュニティ
Javascript
【Javascript】jQuery Draggablesで簡単ドラッグドロップ
Javascript関連情報
更新日：2008年01月15日
jQuery Draggablesで簡単ドラッグドロップ
今回は、jQuery UIの中からDraggablesを紹介します。DOM要素を、極めて簡単にドラッグ可能にしてくれるツールです。
サンプル
いくつかのパターンを試してみます。ドラッグオプションの指定は、前ページでみたように、 cursorやaxisなど引数オブジェクトのプロパティで指定します。他にも、いくつかのプロパティがありますので、最新のものはOptionsや UI/Draggablesあるいは、 デモ などでご参照ください。(このページの実際のコードには、AllaboutサイトのCSSへの微調整が含まれていますので、CSS変更時には多少ずれる可能性があります。)
$('#myDrag1').draggable({containment:'parent'});
//指定したコンテナ内でドラッグできます
//指定したコンテナ内でドラッグできます
$('#myDrag2').draggable({axis:'x'})
//水平方向へドラッグできます
//水平方向へドラッグできます
$('#myDrag3').draggable({axis:'y'})
//垂直方向へドラッグできます
//垂直方向へドラッグできます
$('#myDrag8').draggable({opacity:0.5})
//ドラッグ中に透明化
//ドラッグ中に透明化
$('#myDrag4').draggable({cursor:'move'})
//ドラッグ中のカーソル形状
//ドラッグ中のカーソル形状
$('#myDrag5').draggable({cursorAt:'top'})
//ドラッグ中のカーソル位置
{top, left, bottom, right}
//ドラッグ中のカーソル位置
{top, left, bottom, right}
$('#myDrag6').draggable({stop:function(){
alert('終了')
}});//ドラッグ終了時のイベント
alert('終了')
}});//ドラッグ終了時のイベント
$('#myDrag7').draggable({grid:[50,50]})
//ドラッグ時の移動量xyグリッド
//ドラッグ時の移動量xyグリッド
住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイド の川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！ さぁ、いますぐチェック！
人気Javascriptランキング
Powered by 価格.com
メルマガ登録
【デジタルメルマガ】オトナのオトコなら知っておきたい、PCやデジモノに関する情報をお届けします。
おすすめ厳選サイト
季節特集
専門家を探せる、相談できる。
All About モバイル
Copyright(c) All About, Inc. All rights reserved.
掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます