jQueryのEasyUIのドラッグ - ドラッグアンドドロップショッピングカートを作成します
あなたがドラッグ＆ドロップを実装する単純なWebアプリケーションを介しことができれば、あなたは特別な何かを知っています。 jQueryのEasyUIによって、我々は単純にドラッグすることができますし、Webアプリケーションに機能をドロップします。
このチュートリアルでは、ユーザーがドラッグを作成する方法をお見せし、ショッピングカートページを購入するユーザーを有効にするには、アイテムをドロップします。 商品や価格の買い物かごが更新されます。
ページ上に表示される製品
<ULクラス= "製品"> <李> <a href="#" class="item"> <IMG SRC = "画像/ shirt1.gif" /> <DIV> <P>バルーン</ P> <P>価格：$ <25 / P> </ DIV> こちら</a> </李> <李> <a href="#" class="item"> <IMG SRC = "画像/ shirt2.gif" /> <DIV> <P> </ P>フィーリング <P>価格：$ <25 / P> </ DIV> こちら</a> </李> <！ - その他の製品 - > </ UL>
あなたは上記のコードを見るとわかるように、私たちは商品を表示するために含む<UL>要素番号<LI>要素を追加します。 すべての商品は、<p>要素に含まれている名前と価格特性を有します。
ショッピングカートを作成します。
<DIVクラス= "カート"> <H1>ショッピングカート</ H1> <表のID = "cartcontent"スタイル= "幅：300ピクセル;高さ：自動;"> <THEAD> <TR> <Thのフィールド= "名前"幅= 140>名前</目> <番目/> <Thのフィールド= "量"幅= 60 ALIGN = "右">数量 <Thのフィールド= "価格"幅= 60 ALIGN = "右">価格</目> </ TR> </ THEAD> </表> <Pクラス= "合計">合計：$ 0 </ P> <H2>カートに追加するには、ここにドロップ</ H2> </ DIV>
私たちは、買い物かごの項目を表示するために、データグリッド（データグリッド）を使用します。
商品のクローンをドラッグ
$（ '。項目'）。ドラッグ可能な（{
元に戻す：trueの場合、
プロキシ：「クローン」、
OnStartDragイベント：関数（）{
。$（この）.draggable（ 'オプション'）カーソル= '、許可されていません';
。$（この）.draggable（ 'プロキシ'）CSSの（ 'Zインデックス'、10）;
}、
onStopDrag：関数（）{
。$（この）.draggable（ 'オプション'）カーソル= '移動';
}
}）;
「プロキシ」から我々draggable属性の値が「クローン」に設定されていることに注意してくださいので、クローニングによって生成され、ドラッグエレメントください。
ショッピングカートに選択項目を配置します
$（ '。カート'）。ドロップ可（{
onDragEnter：関数（E、ソース）{
。$（ソース）.draggable（ 'オプション'）カーソル= '自動';
}、
onDragLeave：関数（E、ソース）{
。$（ソース）.draggable（ 'オプション'）カーソル= '、許可されていません';
}、
onDrop：関数（E、ソース）{
。変数名= $（ソース）.find（ 'P：EQ（0）'）HTML（）;
。ヴァール価格= $（ソース）.find（ 'P：EQ（1）'）HTML（）;
addProduct（名前、parseFloatは（price.split（ '$'）[1]））;
}
}）;
VARデータ= { "合計"：0、 "行"：[]};
VARにtotalCost = 0;
関数addProduct（名、価格）{
機能の追加（）{
用（VAR I = 0; iはdata.total <;私は++）{
VAR行= data.rows [i]は、
{（row.name ==名）の場合
row.quantity + = 1;
返します。
}
}
data.total + = 1;
data.rows.push（{
名前：名前、
数量：1、
価格：価格
}）;
}
追加（）;
totalCost + =価格。
。$（ '＃のCartcontent'）データグリッド（ 'loaddataの'、データ）;
$（ 'Div.cart .total'）HTML（ '合計：$' +にtotalCost）;.
}
たび品の配置は、我々が最初に名前と商品価格を取得し、その後、買い物かごを更新するために、「addProduct '関数を呼び出します。