Javascript/Javascript関連情報

jQuery Draggablesで簡単ドラッグドロップ(2ページ目)

今回は、jQuery UIの中からDraggablesを紹介します。DOM要素を、極めて簡単にドラッグ可能にしてくれるツールです。

高橋 登史朗

執筆者:高橋 登史朗

Javascriptガイド

サンプル

いくつかのパターンを試してみます。ドラッグオプションの指定は、前ページでみたように、 cursorやaxisなど引数オブジェクトのプロパティで指定します。

他にも、いくつかのプロパティがありますので、最新のものはOptionsUI/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}

 

 

$('#myDrag6').draggable({stop:function(){
alert('終了')
}});//ドラッグ終了時のイベント

 

 

$('#myDrag7').draggable({grid:[50,50]})
//ドラッグ時の移動量xyグリッド

 



【編集部おすすめの購入サイト】
楽天市場で Javascript 関連の書籍を見るAmazon で Javascript 関連の書籍を見る
  • 前のページへ
  • 1
  • 2
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます