jquery は製品のドラッグ選択効果コードを実装します (自作)_jquery

レンダリングは次のとおりです:


メイン ページのindex.html:

コードをコピー コードは次のとおりです:

• 
  
  
  

  我是第一台打印机

  
  
  


• 
  
  
  

  我是第二台打印机

  
  
  


• 
  
  
  

  我是第三台打印机

  
  
  


• 
  
  
  

  我是第四台打印机

  
  
  


• 
  
  
  

  我是第五台打印机

  
  
  


• 
  
  
  

  我是第六台打印机

  
  
  


• 
  
  
  

  我是第七台打印机

  
  
  


• 
  
  
  

  我是第八台打印机

  
  
  

名称
数量

$(function () {
// jQuery UI Draggable
$("#product li").draggable({

// ドラッグするとアイテムを元の位置に戻しますover
revert:true,

// ドラッグが開始されたら、他の項目の不透明度を下げます
// CSS と同じようにクラスを追加します
drag:function () {
$(this).addClass("active");
$(this).closest("#product").addClass("active");
},

// ドラッグが終了したら CSS クラスを削除します。
stop:function () {
$(this).removeClass("active").closest("#product").removeClass("active");
}
});
// jQuery Ui Droppable
$(".basket").droppable({

// to- に追加されるクラスbe-dropped-element (basket)
activeClass:"active",

// to-be-dropped-element (basket) をホバーすると追加されるクラス
hoverClass :"hover",

// ドロップされる要素のバスケットに触れるとアイテムが受け入れられます
// 異なる値の場合 http://api.jqueryui.com/droppable/ #option-tolerance
tolerance:"touch",
drop:function (event, ui) {

var Basket = $(this),
move = ui.draggable,
itemId = Basket.find("ul li[data-id='" move.attr("data-id") "']");

// 同じ商品がすでにバスケットに入っている場合に値を 1 増やします
if (itemId.html() != null) {
itemId.find("input"). val(parseInt(itemId.find("input").val()) 1);
}
else {
// ドラッグしたアイテムをバスケットに追加します
addBasket(basket, move);

// 数量をバスケットに追加するのではなく、1 インチずつ更新します
move.find("input").val(parseInt(move.find("input").val()) 1);
}
})
// この関数は、アイテムがバスケットに追加されると実行されます
function addBasket(basket, move) {
basket.find ("ul").append('

'
'' 移動します。 find("h3").html() ''
''
'✕');
}
// 削除ボタンが押されるとトリガーされる関数
$(".basket ul li button.delete")。 live("click", function () {
$(this).closest("li").remove();
})
}); 🎜>


jquery-ui-1.9.0.custom.min.js

main.css:

复制代码

代码如下:

/* リセット & .clear
----------------------------*/
* {
マージン: 0;
パディング: 0;
}
.clear:before,
.clear:after {
content: " ";
表示: テーブル;
}
.clear:after { クリア: 両方 }
.clear { *zoom: 1 }
/* MAIN
-------------- --------------*/
body {
フォント: 通常 12px/1.3 アリアル、サンセリフ;
背景色: #eee;
}
li { list-style: none }
a { text-decoration: none }
.container {
position: 相対;
幅: 920px;
マージン: 30px 自動;
}
.container #product {
位置: 相対;
z-インデックス: 2;
フロート: 左;
幅: 670ピクセル;
}
.container #sidebar {
位置: 相対;
z インデックス: 1;
フロート: 右;
幅: 224px;
}
/* 製品
----------------------------*/
#product ul {
幅: 680px;
マージン左: -10px; }
#product ul li {
位置: 相対;
フロート: 左;
幅: 150px;
マージン: 0 0 10px 10px;
パディング: 5px;
背景色: #fff;
境界半径: 4px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
-webkit-transition: -webkit-transform .1s の簡単さ。
-moz-transition: -webkit-transform .1 秒の簡単さ。
-o-transition: -webkit-transform .1 秒の簡単さ。
-ms-transition: -webkit-transform .1 秒の簡単さ。
トランジション: .1 秒の簡単な変換。
}
#product ul li:hover {
背景色: #fff8c1;
}
#product.active ul li {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
フィルター: アルファ(不透明度 = 40);
不透明度: .4;
}
#product.active ul li.active {
z-index: 2;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
フィルター: アルファ(不透明度 = 100);
不透明度: 1;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
変換元: 50% 50%;
-webkit-transform:scale(.6);
-moz-transform:scale(.6);
-o-transform:scale(.6);
-ms-transform:scale(.6);
変換:scale(.6);
}
#product ul li a {
display: block;
color: #000
}
#product ul li a h3 {
margin-top: 5px;
}
#product ul li a h3,
#product ul li a p {
white-space: nowrap;
オーバーフロー: 非表示;
-o-text-overflow: 省略記号;
-ms-text-overflow: 省略記号;
テキストオーバーフロー: 省略記号;
}
#product ul li a img { width:150px;height:150px;display: block }
/* バスケット
------ -------------*/
.basket {
位置: 相対;
}
.basket .basket_list {
幅: 220px;
背景色: #fff;
境界線: 2 ピクセルの透明な点線。
境界半径: 4px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.basket.active .basket_list,
.basket.hover .basket_list { border-color: #ffa0a3 }
.basket.active .basket_list { background-color: #fff8c1 }
.basket.hover .basket_list { 背景色: #ffa0a3 }
/* .head */
.basket .head {
オーバーフロー: 非表示;
マージン: 0 10px;
高さ: 26px;
行の高さ: 26px;
カラー: #666;
border-bottom: 1px ソリッド #ddd;
}
.basket .head .name { float: left }
.basket .head .count { float: right }
/* .head */
.basket ul { パディング-底部: 10px }
.basket ul li {
位置: 相対;
クリア: 両方。
オーバーフロー: 非表示;
マージン: 0 10px;
高さ: 26px;
行の高さ: 32px;
border-bottom: 1px 破線 #eee;
}
.basket ul li:hover { border-bottom-color: #ccc }
.basket ul li span.name {
display: block;
フロート: 左;
幅: 165px;
フォントの太さ: 太字;
空白: nowrap;
オーバーフロー: 非表示;
-o-text-overflow: 省略記号;
-ms-text-overflow: 省略記号;
テキストオーバーフロー: 省略記号;
-webkit-transition: 幅 0.2 秒の容易さ。
-moz-transition: 幅 0.2 秒の容易さ。
-o-transition: 幅 0.2 秒の容易さ。
-ms-transition: 幅 0.2 秒の容易さ。
トランジション: 幅 0.2 秒の容易さ。
}
.basket ul li:hover span.name { width: 146px }
.basket ul li input.count {
float: right;
マージン: 3px 2px 0 0;
幅: 25px;
行の高さ: 20px;
text-align: 中央;
ボーダー: 0;
境界半径: 3px;
背景色: #ddd;
}
.basket ul li button.delete {
位置: 絶対;
右: 30px;
上: 3px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
フィルター: alpha(不透明度 = 0);
不透明度: 0;
幅: 20px;
行の高さ: 20px;
高さ: 20px;
text-align: 中央;
フォントサイズ: 11px;
ボーダー: 0;
カラー: #EE5757;
背景色: #eee;
境界半径: 3px;
カーソル: ポインタ;
-webkit-transition: 不透明度 .2 秒の容易さ。
-moz-transition: 不透明度 0.2 秒の容易さ。
-o-transition: 不透明度 0.2 秒の容易さ。
-ms-transition: 不透明度 0.2 秒の容易さ。
トランジション: 不透明度 0.2 秒の緩和。
}
.basket ul li:hover button.delete {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
フィルター: アルファ(不透明度 = 100);
不透明度: 1;
}
.basket ul li button.delete:hover {
color: #fff;
背景色: #ffa0a3;
}
.basket ul li button.delete:active {
color: #fff;
背景色: #EE5757;
}