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) {

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

// 如果購物籃中已有相同商品，則將值加1
if (itemId.html() != null) {
itemId.find("input"). val(parseInt(itemId.find("輸入").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:之前,
.clear:之後{
內容: " ";
顯示：表格；
}
.clear:after { 清除：兩者}
.clear { *zoom: 1 }
/* MAIN
------------- - --------------*/
body {
字體：正常12px/1.3 arial，無襯線；
背景顏色：#eee;
}
li { 列表樣式：無}
a { 文字裝飾：無}
.container {
位置：相對；
寬度：920px;
邊距：30px 自動；
}
.container #product {
位置：相對；
z 索引：2;
浮動：左；
寬度：670px;
}
.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);
盒子陰影：0 1px 2px rgba( 0, 0, 0, .2);
-webkit-transition：-webkit-transform .1s 輕鬆；
-moz-transition：-webkit-transform .1s 輕鬆；
-o-transition： -webkit-transform .1s 輕鬆；
-ms-transition：-webkit-transform .1s 輕鬆；
過渡：變換0.1 秒的輕鬆度；
}
#product ul li:hover {
背景顏色：#fff8c1;
}
#product.active ul li {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
過濾器：alpha（不透明度= 40）；
不透明度：.4;
}
#product.active ul li.active {
z-index: 2;
-ms- filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
過濾器：alpha（不透明度= 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: 縮放(.6 );
-ms-transform: 縮放(.6);
變換：縮放(.6);
}
#product ul li a {
顯示：區塊；
顏色：#000
}
#product ul li a h3 {
頁邊距：5px;
}
#product ul li a h3,
#product ul li a pduct ul li a {
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;
邊框：2px 虛線透明；
邊框半徑：4px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
盒子陰影：0 1px 2px rgba(0, 0, 0, .2);
}
.basket.active .basket_list，
.basket.hover .basket_list { 邊框顏色：#ffa0a3 }
.basket.active .basket_list { 背景顏色：#fff8c1 }
.basket.hover .basket_list { 背景顏色：#ffa0a3 }
/* .head */
.basket .head {
/* .head */
.basket .head {
溢出：隱藏；
邊距：0 10px;
高度：26px;
行高：26px;
顏色：#666;
邊框底部：1px 實心#ddd；
}
.basket .head .name { float: left }
.basket .head .count { float: right }
/* .head */
.basket ul { padding-底部：10px }
.basket ul li {
位置：相對；
明確：兩者；
溢出：隱藏；
邊距：0 10px;
高度：26px；
行高：32px；
邊框底部：1px虛線#eee;
}
.basket ul li:hover { border-bottom-color: #ccc }
.basket ul li span.name {
display: block;
浮動：左;
寬度：165px;
字體粗細：粗體；
空白：nowrap;
溢位：隱藏；
-o-> 空白：nowrap;
溢出：隱藏；
-o-> 空白：nowrap;
溢出：隱藏；
-o-> 空白：nowrap;
溢出：隱藏；
-o--o- text-overflow：省略號；
-ms-text-overflow：省略號；
文字溢出：省略號；
-webkit-transition：寬度0.2s 緩和；
-moz-transition：寬度0.2s緩動；
-o-transition：寬度0.2s 緩動；
-ms-transition：寬度0.2s 緩和；
過渡：寬度0.2s 緩和；
}
.basket ulul li:hover span.name { width: 146px }
.basket ul li input.count {
float: right;
邊距：3px 2px 0 0;
寬度：25px；行高：20px;
文字對齊：居中；
邊框：0;
邊框半徑：3px;
背景顏色：#ddd;
}
.basket ul li button. delete {
位置：絕對；
右：30px;
頂部：3px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
過濾器：alpha（不透明度= 0）；
不透明度：0；
寬度：20px；
行高：20px；
高度：20px；
文本對齊：居中；
字體大小：11px；
邊框：0；
顏色：#EE5757;
背景顏色：#eee; 邊框半徑：3px; 遊標：指針； -webkit -transition：不透明度 0.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)";
過濾器：alpha（不透明度= 100）；
不透明度：1；
}
.basket ul li button.delete:hover {
color: #fff;
背景顏色：#ffa0a3;
}
. basket ul li button.delete:active {
color: #fff;
背景顏色：#EE5757;
}