jquery는 제품 드래그 선택 효과 코드를 구현합니다(자체 작성)_jquery

렌더링은 다음과 같습니다.


메인 페이지 index.html:

코드 복사 코드는 다음과 같습니다.

• 
  
  
  

  我是第一台打印机

  
  
  


• 
  
  
  

  我是第二台打印机

  
  
  


• 
  
  
  

  我是第三台打印机

  
  
  


• 
  
  
  

  我是第四台打印机

  
  
  


• 
  
  
  

  我是第五台打印机

  
  
  


• 
  
  
  

  我是第六台打印机

  
  
  


• 
  
  
  

  我是第七台打印机

  
  
  


• 
  
  
  

  我是第八台打印机

  
  
  

名称
数量

<스크립트>
$(function () {
// jQuery UI Draggable
$("#product li").draggable({

// 드래그할 때 항목을 다시 제자리로 가져옵니다. over
revert:true,

// 드래그가 시작되면 다른 항목의 불투명도가 감소합니다.
// CSS를 사용하여 클래스를 추가합니다.
drag:function () {
$(this).addClass("활성");
$(this).closest("#product").addClass("활성")
},

// 드래그가 끝나면 CSS 클래스를 제거합니다.
stop:function () {
$(this).removeClass("active").closest("#product").removeClass("active");
}
});
// jQuery Ui Droppable
$(".basket").droppable({

// 다음에 추가될 클래스입니다. be-dropped-element(바구니)
activeClass:"active",

// 삭제할 요소(바구니)를 가리키면 추가될 클래스
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() ''
''
'<버튼 클래스 ="delete">✕');
}
// 삭제 버튼을 누르면 실행되는 함수
$(".basket ul li 버튼.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 arial, sans-serif;
배경색: #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 용이성;
전환: .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(불투명도=100)";
필터: 알파(불투명도 = 100);
불투명도: 1;
-webkit-transform-origin: 50% 50%;
-moz-변환-원산지: 50% 50%;
-o-변환-원산지: 50% 50%;
-ms-변환-원산지: 50% 50%;
변환 출처: 50% 50%;
-webkit-transform: scale(.6);
-moz-transform: scale(.6);
-o-transform: scale(.6);
-ms-변환: 규모(.6);
변환: scale(.6);
}
#product ul li a {
디스플레이: 블록;
색상: #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 .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 {
오버플로: 숨김;
여백: 0 10px;
높이: 26px;
줄 높이: 26px;
색상: #666;
테두리 하단: 1px 솔리드 #ddd;
}
.basket .head .name { float: 왼쪽 }
.basket .head .count { float: 오른쪽 }
/* .head */
.basket ul { padding- 하단: 10px }
.basket ul li {
위치: 상대;
지우기: 둘 다;
오버플로: 숨김;
여백: 0 10px;
높이: 26px;
줄 높이: 32px;
테두리 하단: 1px 점선 #eee;
}
.basket ul li:hover { border-bottom-color: #ccc }
.basket ul lispan.name {
display: block;
플로트: 왼쪽;
너비: 165px;
글꼴 두께: 굵게;
공백: nowrap;
오버플로: 숨김;
-o-text-overflow: 줄임표;
-ms-text-overflow: 줄임표;
텍스트 오버플로: 줄임표;
-webkit-transition: 너비 .2s 용이성;
-moz-transition: 너비 .2s 용이성;
-o-transition: 너비 .2s 용이성;
-ms-transition: 너비 .2s 용이성;
전환: 너비 .2초 용이성;
}
.basket ul li:hover span.name { 너비: 146px }
.basket ul li input.count {
float: right;
여백: 3px 2px 0 0;
너비: 25px;
줄 높이: 20px;
텍스트 정렬: 가운데;
테두리: 0;
테두리 반경: 3px;
배경색: #ddd;
}
.basket ul li 버튼.delete {
위치: 절대;
오른쪽: 30px;
상단: 3px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(불투명도=0)";
필터: 알파(불투명도 = 0);
불투명도: 0;
너비: 20px;
줄 높이: 20px;
높이: 20px;
텍스트 정렬: 가운데;
글꼴 크기: 11px;
테두리: 0;
색상: #EE5757;
배경색: #eee;
테두리 반경: 3px;
커서: 포인터;
-webkit-transition: 불투명도 .2s 용이성;
-moz-transition: 불투명도 .2s 용이성;
-o-transition: 불투명도 .2s 용이성;
-ms-transition: 불투명도 .2s 용이성;
전환: 불투명도 .2초 용이성;
}
.basket ul li:hover 버튼.delete {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
필터: 알파(불투명도 = 100);
불투명도: 1;
}
.basket ul li 버튼.delete:hover {
color: #fff;
배경색: #ffa0a3;
}
.basket ul li 버튼.delete:active {
color: #fff;
배경색: #EE5757;
}