タグ

jQuery UIとjqueryに関するlax34のブックマーク (4)

  • jQuery UIでsortable要素にinputやtextareaがある場合に選択できない: JavaScriptメモ

    sortableを指定しドラッグアンドドロップを可能にした要素内にinput要素やtextarea要素があると選択されなくなってしまう。 #4429 (Can't select text in inputs within sortables) – jQuery UIによると以下のようにすると解決できそう。 $("#hoge").sortable().disableSelection().delegate('input,textarea','click',function(ev){ ev.target.focus(); }); 若干ソースは変更してます(delegate使わない意味がわからない)。

  • ドラッグ&ドロップで新たな項目を並び替えられるリストへ追加

    jQuery UI の Draggable プラグインを使った、ドラッグして移動できるボックスと、jQuery UI の Sortable プラグインを使った、並び替えられるリストとの併用。併用することにより、ドラッグ&ドロップで、新たな項目を、並び替えられるリストへ、追加できる。 実装例(サンプル) 実装例の動作について 「この項目を追加」と書いてあるリスト項目を、ドラッグして、破線で囲んだリストの「項目 2」の上へ移動すると、「項目 2」が下へ移動し、「項目 1」と「項目 2」の間にスペースができる。そのスペースへドロップすると、破線で囲んだリストへ追加することができる。破線で囲んだリスト項目は、並べ替えることもできる。 実装例のソースコード 読み込み 読み込み方は、2種類ある。パスは、それぞれ、アップロードした場所を指定する。 まとめて読み込む場合 <link rel="styles

  • jQuery UI の Dialog プラグインを使った送信確認ダイアログ

    実装例(サンプル)の動作について 「送信」ボタンをクリックすると、ブラウザの中央に、確認ダイアログが出現する。 ダイアログ内に「送信」と「キャンセル」の2つのボタンが表示される。 サンプルなので、実際には送信しない。 ダイアログ内の「×」アイコンをクリックすると、ダイアログを閉じる。 ダイアログ内のタイトルをドラッグしながら、ダイアログを移動できる。 ダイアログのサイズを変更できる。 実装例(サンプル)のソースコード 読み込み パスは、それぞれ、アップロードした場所を指定する。 まとめて読み込む場合 <link rel="stylesheet" href="themes/base/jquery.ui.all.css" /> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/ja

  • jQuery UI の Sortable を使いドラッグ&ドロップで並べ替え

    jQuery UI の Sortable プラグインを使い、ドラッグ&ドロップで並べ替えを行えるようにする方法。 実装例(サンプル) 項目 1 項目 2 項目 3 項目 4 項目 5 項目 6 項目 7 実装例の動作について 「項目 1」をドラッグして、下へ動かし、「項目 2」の上に持ってくると、「項目 2」が上へ移動し、「項目 2」と「項目 3」の間にスペースができる。そのスペースへドロップすると、「項目 1」と「項目 2」が入れ替わり、「項目 2」「項目 1」「項目 3」…の順番になる。 同様に、「項目 1」から「項目 7」の項目全て、ドラッグ&ドロップによる並べ替えが行える。 実装例のソースコード 読み込み 読み込み方は、2種類ある。パスは、それぞれ、アップロードした場所を指定する。 まとめて読み込む場合 <link rel="stylesheet" href="themes/bas

  • 1