jQueryのUIの例 - 場所（ドロップ可）とは?

jQuery UI コース
jQuery UI テーマ
jQuery UI コンポーネントライブラリ
jQuery UI リファレンスマニュアル
jQuery UI 例

jQueryのUIの例 - 場所（ドロップ可）2024 年の最新の入門チュートリアル。このコースではデフォルトの機能,一般に認められました,拡散を防ぎます,ドラッグ可能な場所を復元,ショッピングカートのデモ,シンプルなフォトマネージャ,視覚フィードバック, について学習できます。

jQueryのUIの例 - 場所（ドロップ可）

前：jQueryのUIの例-ドラッグ（ドラッグ可能な）

次へ：jQueryのUIのインスタンス-ズーム（サイズ変更可能）

ターゲットを作成するためにドラッグすることができますウィジェット。

ドロップ可能な相互作用の詳細については、APIドキュメントを参照してください小さな部品（ドロップ可ウィジェット）を配置することができます。

デフォルトの機能

任意のDOM要素にドロップ可能機能を有効にすると、ターゲットを作成するためにウィジェットをドラッグすることができます。

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル> jQueryのUIの場所（ドロップ可） - デフォルトの機能</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スタイル>
  #draggable {幅：100ピクセル、高さ100ピクセル;パディング：0.5em;フロート：左;マージン：10pxの10pxの10pxの0;}
  #droppable {幅：150ピクセル、高さ150ピクセル;パディング：0.5em;フロート：左;マージン：10pxの;}
  </スタイル>
  <スクリプト>
  $（関数（）{
    $（ "#draggable」）.draggable（）;
    .droppable $（ "#droppable」）（{
      ドロップ：機能（イベント、UIを）{
        $（この）
          .addClass（「UI-状態-ハイライト」）
          .find（「P」）
            を（「ドロップ！ "）;
      }
    }）;
  }）;
  </スクリプト>
</ HEAD>
<ボディ>
 
<DIVのID = "ドラッグ可能な"クラス= "UIウィジェットコンテンツ」>
  <P>私は、ターゲットの場所にドラッグ送ってください！ </ P>
</ DIV>
 
<DIVのID = "ドロップ可能な"クラス= "UIウィジェットヘッダ">
  <P>ここから出てください！ </ P>
</ DIV>
 
 
</ BODY>
</ HTML>

一般に認められました

使用accept受け入れ（または要素のグループ）ドロップ可能要素をターゲットのオプションを。

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル> jQueryのUIの場所（ドロップ可） -  </タイトル>受け入れ
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スタイル>
  #droppable {幅：150ピクセル、高さ150ピクセル;パディング：0.5em;フロート：左;マージン：10pxの;}
  #draggable、＃ドラッグ可能-nonvalid {幅：100ピクセル、高さ100ピクセル;パディング：0.5em;フロート：左;マージン：10pxの10pxの10pxの0;}
  </スタイル>
  <スクリプト>
  $（関数（）{
    $（ "ドラッグ可能-nonvalid #draggable、＃"）.draggable（）;
    .droppable $（ "#droppable」）（{
      受け入れ：「#draggable」、
      activeClass：「UI-状態ホバー」、
      hoverClass：「UI-状態-アクティブ」、
      ドロップ：機能（イベント、UIを）{
        $（この）
          .addClass（「UI-状態-ハイライト」）
          .find（「P」）
            を（「ドロップ！ "）;
      }
    }）;
  }）;
  </スクリプト>
</ HEAD>
<ボディ>
 
<DIVのID = "ドラッグ可能な-nonvalid"クラス= "UIウィジェットコンテンツ」>
  <P>私はドラッグ可能に配置することはできません。</ P>
</ DIV>
 
<DIVのID = "ドラッグ可能な"クラス= "UIウィジェットコンテンツ」>
  <P>先に私をドラッグしてください。</ P>
</ DIV>
 
<DIVのID = "ドロップ可能な"クラス= "UIウィジェットヘッダ">
  <P>受け入れる：「#draggable '</ P>
</ DIV>
 
 
</ BODY>
</ HTML>

拡散を防ぎます

ネストされたドロップ可能を使用する場合-たとえば、フォルダや文書ノードを持つツリーが編集可能なディレクトリ構造を持つことができます- greedyドラッグ可能にするとき（ドロップ可能）子ノード上に置かれないようにすると、このオプションがtrueに設定されていますイベントの伝播。

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル> jQueryのUIの場所（ドロップ可） - 拡大を防ぐ</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スタイル>
  #draggable {幅：100ピクセル、高さ40ピクセル;パディング：0.5em;フロート：左;マージン：10pxの10pxの10pxの0;}
  #droppable、＃のdroppable2 {幅：230px;高さ：120ピクセル;パディング：0.5em;フロート：左;マージン：10pxの;}
  ＃ドロップ可-インナー、＃のdroppable2-インナー{幅：170px;高さ：60PX;パディング：0.5em;フロート：左;マージン：10pxの;}
  </スタイル>
  <スクリプト>
  $（関数（）{
    $（ "#draggable」）.draggable（）;
 
    $（ "ドロップ可-インナー#droppable、＃"）.droppable（{
      activeClass：「UI-状態ホバー」、
      hoverClass：「UI-状態-アクティブ」、
      ドロップ：機能（イベント、UIを）{
        $（この）
          .addClass（「UI-状態-ハイライト」）
          .find（ "> P」）
            を（「ドロップ！ "）;
        falseを返します。
      }
    }）;
 
    $（ "＃Droppable2、＃のdroppable2-内側」）.droppable（{
      貪欲：trueの場合、
      activeClass：「UI-状態ホバー」、
      hoverClass：「UI-状態-アクティブ」、
      ドロップ：機能（イベント、UIを）{
        $（この）
          .addClass（「UI-状態-ハイライト」）
          .find（ "> P」）
            を（「ドロップ！ "）;
      }
    }）;
  }）;
  </スクリプト>
</ HEAD>
<ボディ>
 
<DIVのID = "ドラッグ可能な"クラス= "UIウィジェットコンテンツ」>
  <P>先に私をドラッグしてください。</ P>
</ DIV>
 
<DIVのID = "ドロップ可能な"クラス= "UIウィジェットヘッダ">
  <P>外部ドロップ可能</ P>
  <DIVのID = "ドロップ可能なインナー"クラス= "UIウィジェットヘッダ">
    <P>（貪欲なし）内部ドロップ可能</ P>
  </ DIV>
</ DIV>
 
<DIVのID = "droppable2"クラス= "UIウィジェットヘッダ">
  <P>外部ドロップ可能</ P>
  <DIVのID = "droppable2-内側」クラス=" UIウィジェットヘッダ ">
    <P>内部ドロップ可能（貪欲付き）</ P>
  </ DIV>
</ DIV>
 
 
</ BODY>
</ HTML>

ドラッグ可能な場所を復元

ブール値と同じようにrevertドラッグ可能なオプションは、ドラッグを停止するときに元の場所にドラッグ可能（またはその助手）を返します。

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル> jQueryのUIの場所（ドロップ可） - 減少ドラッグ可能な位置</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スタイル>
  #draggable、＃のdraggable2 {幅：100ピクセル、高さ100ピクセル;パディング：0.5em;フロート：左;マージン：10pxの10pxの10pxの0;}
  #droppable {幅：150ピクセル、高さ150ピクセル;パディング：0.5em;フロート：左;マージン：10pxの;}
  </スタイル>
  <スクリプト>
  $（関数（）{
    .draggable $（ "#draggable」）（{戻す："有効 "}）;
    $（ "＃Draggable2」）.draggable（{戻す："無効 "}）;
 
    .droppable $（ "#droppable」）（{
      activeClass：「UI-状態-デフォルト」、
      hoverClass：「UI-状態ホバー」、
      ドロップ：機能（イベント、UIを）{
        $（この）
          .addClass（「UI-状態-ハイライト」）
          .find（「P」）
            を（「置か！ "）;
      }
    }）;
  }）;
  </スクリプト>
</ HEAD>
<ボディ>
 
<DIVのID = "ドラッグ可能な"クラス= "UIウィジェットコンテンツ」>
  <P>ターゲット上に置い縮小ます。</ p>
</ DIV>
 
<DIVのID = "draggable2"クラス= "UIウィジェットコンテンツ」>
  <P>削減がターゲット上に置かれていない場合</ P>
</ DIV>
 
<DIVのID = "ドロップ可能な"クラス= "UIウィジェットヘッダ">
  <P>ここで入れてください。</ P>
</ DIV>
 
 
</ BODY>
</ HTML>

ショッピングカートのデモ

製品ディレクトリ構造を表示するには、折りたたみパネルを使用する方法を示し、ショッピングカートに製品を追加するには、ドラッグ＆ドロップを使用して、ショッピングカートの製品ソート可能です。

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル> jQueryのUIの場所（ドロップ可） - ショッピングカートデモ</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スタイル>
  H1 {パディング：.2em;マージン：0;}
  #products {フロート：左;幅：500pxなど;マージン右：2EM;}
  #cart {幅：200pxの;フロート：左;マージントップを：1EM;}
  / * *ドロップ可能な最大化するために、スタイルのリストを定義します/
  #cartのオール{マージン：0;パディング：1EM 0 1EMの3em;}
  </スタイル>
  <スクリプト>
  $（関数（）{
    $（ "#catalog」）.accordion（）;
    .draggable $（ "#catalogリー」）（{
      appendTo：「ボディ」、
      ヘルパー： "クローン"
    }）;
    $（ "#cart OL"）.droppable（{
      activeClass：「UI-状態-デフォルト」、
      hoverClass：「UI-状態ホバー」、
      受け入れ： "：ない（.ui-ソート可能ヘルパー）」、
      ドロップ：機能（イベント、UIを）{
        $（この）.find（ ".placeholder」）.remove（）;
        $（ "<李> </ LI>"）の.text（ui.draggable.text（））.appendTo（この）;
      }
    }）。ソート可能（{
      アイテム：「李：ありません（.placeholder）」、
      並べ替え：関数（）{
        //この問題を解決することができますconnectWithSortableを使用//ドロップ可能でソート可能な追加したエントリとの対話を取得していますが、アクティブ/ hoverClassオプション$をカスタマイズすることはできません（この）.removeClass（「UI-状態-デフォルト "）;
      }
    }）;
  }）;
  </スクリプト>
</ HEAD>
<ボディ>
 
<DIVのID = "製品">
  <H1クラス= "UIウィジェットヘッダ">商品</ H1>
  <DIVのID = "カタログ">
    <H2> <a href="#"> Tシャツ</a>の</ H2>
    <DIV>
      <UL>
        <李> Lolcatシャツます。</ li>
        <李> Cheezeburgerシャツます。</ li>
        <李> Buckitシャツます。</ li>
      </ UL>
    </ DIV>
    <H2> <aのhref="#">バッグ</a>の</ H2>
    <DIV>
      <UL>
        <李>ゼブラストライプます。</ li>
        <李>ブラックレザーます。</ li>
        <李>クロコダイルます。</ li>
      </ UL>
    </ DIV>
    <H2> <a href="#">ガジェット</a>の</ H2>
    <DIV>
      <UL>
        <李> iPhoneます。</ li>
        <李>のiPodます。</ li>
        <李>のiPadます。</ li>
      </ UL>
    </ DIV>
  </ DIV>
</ DIV>
 
<DIVのID = "カート">
  <H1クラス= "UIウィジェットヘッダ">カート</ H1>
  <DIVクラス= "UIウィジェットコンテンツ」>
    <オル>
      <李クラス= "プレースホルダ">ここ</ LI>製品を追加
    </オル>
  </ DIV>
</ DIV>
 
 
</ BODY>
</ HTML>

シンプルなフォトマネージャ

あなたはドラッグアンドごみ箱に写真をドロップしたり、写真を削除するには、ごみ箱アイコンをクリックすることができます。

あなたは、ドラッグアンドドロップの写真をアルバムにや写真を復元するために、リサイクルのアイコンをクリックすることもできます。

あなたは、より大きな画像を表示するには、アイコンをクリックしてズームすることができます。 jQueryのUIのダイアログ（対話）モーダルウィンドウするための手段。

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル> jQueryのUIの場所（ドロップ可） - シンプルなフォトマネージャ</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スタイル>
  表示#gallery {フロート：左;幅：65％;のmin-height：12em;}
  .gallery.customステートアクティブ{背景：#eee;}
  .gallery李{フロート：左;幅：96px;パディング：0.4em;マージン：0 0.4em 0.4em 0;テキスト整列：センター;}
  .galleryリーH5 {マージン：0 0 0.4em;カーソル：移動;}
  .galleryリーA {フロート：右;}
  .gallery李a.ui-アイコン-zoomin {フロート：左;}
  .galleryリーIMG {幅：100％;カーソル：移動;}
 
  #trash {フロート：右;幅：32％;のmin-height：18em;パディング：1％;}
  #trash H4 {行の高さ：16pxに;マージン：0 0 0.4em;}
  #trash H4 .ui-アイコン{フロート：左;}
  #trashの.gallery h5を{表示：なし;}
  </スタイル>
  <スクリプト>
  $（関数（）{
    //これは、アルバムやゴミのvar $ギャラリー= $（ "表示#gallery」）であります
      $ゴミ箱= $（ "#trash"）;
 
    // {（アルバムエントリドラッグ可能な$（ "李"、$ギャラリー）.draggableを作ります
      キャンセル：//ときに未配置、エントリが元の位置封じ込めに戻すだろう "無効"： "a.ui-アイコンを"、//元に戻すドラッグを開始していないアイコンをクリックし、「文書」を、
      ヘルパー：「クローン」、
      カーソル： "移動"
    }）;
 
    //ゴミ箱を配置することができましょう、{（アルバムエントリの$ trash.droppableを受け入れ
      受け入れ：「表示#gallery>李」を、
      activeClass：「UI-状態-ハイライト」、
      ドロップ：機能（イベント、UIを）{
        deleteImage（ui.draggable）。
      }
    }）;
 
    //アルバムを配置することができることを確認し、{（ごみ箱エントリの$ gallery.droppableを受け入れ
      受け入れ：「#trash李」を、
      activeClass：「カスタム状態-アクティブ」、
      ドロップ：機能（イベント、UIを）{
        recycleImage（ui.draggable）。
      }
    }）;
 
    //画像削除機能するvar recycle_icon = "は、<a href = 'リンク/へ/リサイクル/スクリプト/ /私たち/ HAVE / JS /オフ」タイトル='復元画像」クラス= 'UIアイコンUI-アイコンリフレッシュ」 >「画像</a>を復元します。
    関数deleteImage（$アイテム）{
      $ Item.fadeOut（関数（）{
        var $一覧= $（ "UL"、$のゴミ箱）.LENGTH？
          $（ "UL"、$ゴミ箱）：
          $（ "<ULクラス= 'ギャラリーUIヘルパーリセット' />"）.appendTo（$のゴミ）。
 
        $ Item.find（「a.ui-アイコンをゴミ箱」）.remove（）;
        $ Item.append（recycle_icon）.appendTo（$リスト）.fadeIn（関数（）{
          $アイテム
            .animate（{幅： "48px"}）
            .find（「IMG」）
              .animate（{身長： "36px"}）;
        }）;
      }）;
    }
 
    //イメージするvar trash_iconを復元= "は、<a href = 'リンク/ /ゴミ箱/スクリプト/ /私たち/ HAVE / JS /オフには' title =クラス= 'UI-アイコンUI-アイコン-ゴミを' '画像を削除します」 >「画像</a>を削除します。
    関数recycleImage（$アイテム）{
      $ Item.fadeOut（関数（）{
        $アイテム
          .find（「a.ui-アイコンリフレッシュ」）
            .remove（）
          .END（）
          .css（ "幅"、 "96px"）
          .append（trash_icon）
          .find（「IMG」）
            .css（「高さ」、「72px」）
          .END（）
          .appendTo（$ギャラリー）
          .fadeIn（）。
      }）;
    }
 
    //イメージのプレビュー機能、デモui.dialogモーダルウィンドウ関数viewLargerImageとして使用する（$リンク）{
      VAR SRC = $ link.attr（「HREF」）、
        タイトル= $ link.siblings（「IMG」）.ATTR（「ALT」）、
        $モーダル= $（ "IMG [SRC $ = '" + SRC + "']"）;
 
      {（$ modal.length）の場合
        $ Modal.dialog（ "オープン"）;
      }エルス{
        VARのimg = $（ "<IMG ALT = '" +タイトル+ "'幅= '384'の高さ= '288'スタイル= '表示：なし;パディング：8px;' />"）
          .ATTR（「SRC」、SRC）.appendTo（ "身体"）;
        setTimeoutメソッド（関数（）{
          img.dialog（{
            タイトル：タイトル、
            幅：400、
            モーダル：真
          }）;
        }、1）;
      }
    }
 
    イベント.click（関数（イベントを通じて//プロキシアイコン解決行動$（ "ul.gallery>李"））{
      変数$アイテム= $（この）、
        $ TARGET = $（event.target）;
 
      場合（$ target.is（「a.ui-アイコンをゴミ箱 "））{
        deleteImage（$アイテム）;
      }エルス場合（$ target.is（「a.ui-アイコン-zoomin "））{
        viewLargerImage（$ターゲット）。
      }エルス場合（$ target.is（「a.ui-アイコンリフレッシュ "））{
        recycleImage（$アイテム）;
      }
 
      falseを返します。
    }）;
  }）;
  </スクリプト>
</ HEAD>
<ボディ>
 
<DIVクラス= "UIウィジェットUIヘルパー-clearfix">
 
<ULのID = "ギャラリー"クラス= "ギャラリーUIヘルパーリセットUIヘルパー-clearfix">
  <李クラス= "UIウィジェットコンテンツUI-コーナー-TR">
    <H5クラス= "UIウィジェットヘッダ">ハイタトラ</ H5>
    <IMG SRC = "ja/のwp-コンテンツ/アップロード/ 2014/03 / high_tatras_min.jpg" ALT = "ハイタトラピーク"幅= "96"高さ= "72">
    <a href="/ja/wp-content/uploads/2014/03/high_tatras.jpg"title="查看大图"class="ui-icon ui-icon-zoomin">見る（大）します</a>
    <a href="link/to/trash/script/when/we/have/js/off"title="删除图像"class="ui-icon ui-icon-trash">画像を削除します</a>
  </李>
  <李クラス= "UIウィジェットコンテンツUI-コーナー-TR">
    <H5クラス= "UIウィジェットヘッダ">ハイタトラ2 </ H5>
    <IMG SRC = "ja/のwp-コンテンツ/アップロード/ 2014/03 / high_tatras2_min.jpg" ALT = "グリーンマウンテンレイクキャビン"幅= "96"高さ= "72">
    <a href="/ja/wp-content/uploads/2014/03/high_tatras2.jpg"title="查看大图"class="ui-icon ui-icon-zoomin">見る（大）します</a>
    <a href="link/to/trash/script/when/we/have/js/off"title="删除图像"class="ui-icon ui-icon-trash">画像を削除します</a>
  </李>
  <李クラス= "UIウィジェットコンテンツUI-コーナー-TR">
    <H5クラス= "UIウィジェットヘッダ">ハイタトラ3 </ H5>
    <IMG SRC = "ja/のwp-コンテンツ/アップロード/ 2014/03 / high_tatras3_min.jpg" ALT = "登山計画"幅= "96"高さ= "72">
    <a href="/ja/wp-content/uploads/2014/03/high_tatras3.jpg"title="查看大图"class="ui-icon ui-icon-zoomin">見る（大）します</a>
    <a href="link/to/trash/script/when/we/have/js/off"title="删除图像"class="ui-icon ui-icon-trash">画像を削除します</a>
  </李>
  <李クラス= "UIウィジェットコンテンツUI-コーナー-TR">
    <H5クラス= "UIウィジェットヘッダ">ハイタトラ4 </ H5>
    <IMG SRC = "ja/のwp-コンテンツ/アップロード/ 2014/03 / high_tatras4_min.jpg" ALT = "közi入力のkopkaの上部にある"幅= "96"高さ= "72">
    <a href="/ja/wp-content/uploads/2014/03/high_tatras4.jpg"title="查看大图"class="ui-icon ui-icon-zoomin">見る（大）します</a>
    <a href="link/to/trash/script/when/we/have/js/off"title="删除图像"class="ui-icon ui-icon-trash">画像を削除します</a>
  </李>
</ UL>
 
<DIVのID = "ごみ箱"クラス= "UIウィジェットコンテンツのUI状態-デフォルト">
  <H4クラス= "UIウィジェットヘッダ"> <スパンクラス= "UI-アイコンUI-アイコンをゴミ箱">ゴミ箱</ span>をゴミ箱</ H4>
</ DIV>
 
</ DIV>
 
 
</ BODY>
</ HTML>

視覚フィードバック

ドロップ可能な場合、またはドロップ可能にカーソルを合わせたときにドロップ可能な外観を変更する場合（すなわち、許容可能なドラッグ可能がドロップ可能に配置されている）が活性化されます。使用hoverClassまたはactiveClassそれぞれ、クラスを指定するオプションを選択します。

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル> jQueryのUIの場所（ドロップ可） - 視覚的なフィードバック</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スタイル>
  #draggable、＃のdraggable2 {幅：90PX;高さ：90PX;パディング：0.5em;フロート：左;マージン：10pxの10pxの10pxの0;}
  #droppable、＃のdroppable2 {幅：120ピクセル、高さ120ピクセル;パディング：0.5em;フロート：左;マージン：10pxの;}
  H3 {クリア：左;}
  </スタイル>
  <スクリプト>
  $（関数（）{
    $（ "#draggable」）.draggable（）;
    .droppable $（ "#droppable」）（{
      hoverClass：「UI-状態ホバー」、
      ドロップ：機能（イベント、UIを）{
        $（この）
          .addClass（「UI-状態-ハイライト」）
          .find（「P」）
            を（「ドロップ！ "）;
      }
    }）;
 
    $（ "＃Draggable2」）.draggable（）;
    $（ "＃Droppable2」）.droppable（{
      受け入れ：「＃1 draggable2」を、
      activeClass：「UI-状態-デフォルト」、
      ドロップ：機能（イベント、UIを）{
        $（この）
          .addClass（「UI-状態-ハイライト」）
          .find（「P」）
            を（「ドロップ！ "）;
      }
    }）;
  }）;
  </スクリプト>
</ HEAD>
<ボディ>
 
<H3>ドロップ可能な上にマウスを移動するとときのフィードバック：</ H3>
 
<DIVのID = "ドラッグ可能な"クラス= "UIウィジェットコンテンツ」>
  <P>先に私をドラッグしてください。</ P>
</ DIV>
 
<DIVのID = "ドロップ可能な"クラス= "UIウィジェットヘッダ">
  <P>ここで入れてください。</ P>
</ DIV>
 
<H3>が活性化ドラッグ可能なフィードバック：</ H3>
 
<DIVのID = "draggable2"クラス= "UIウィジェットコンテンツ」>
  <P>先に私をドラッグしてください。</ P>
</ DIV>
 
<DIVのID = "droppable2"クラス= "UIウィジェットヘッダ">
  <P>ここで入れてください。</ P>
</ DIV>
 
 
</ BODY>
</ HTML>

前：jQueryのUIの例-ドラッグ（ドラッグ可能な）

次へ：jQueryのUIのインスタンス-ズーム（サイズ変更可能）

jQuery UI コース

jQuery UI テーマ

jQuery UI コンポーネントライブラリ

jQuery UI リファレンスマニュアル

jQuery UI 例