jQuery는 드래그 앤 드롭으로 휴지통 삭제 기능을 만듭니다.

이번에는 jQuery를 이용해 드래그 앤 드롭 기능을 가져오겠습니다. jQuery를 사용하여 휴지통으로 드래그 앤 드롭 기능을 만들 때의 주의사항은 다음과 같습니다. 실제 사례를 살펴보겠습니다.

렌더링 실행:

핵심 파일 소개
여기서 jquery, jquery ui 및 jquery ui css를 소개해야 합니다.

<link rel="stylesheet" href="assets/css/jquery-ui.css" />
<script src="js/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jqueryui/1.9.2/jquery-ui.min.js"></script>

html 빌드

<p id="main">
 <p class="folder">
  <p class="front"></p>
  <p class="back"></p>
 </p>
  <img src="assets/48px/box.png" style="top:340px;left:100px;" alt="box" /> 
  <img src="assets/48px/calculator.png" style="top:340px;left:170px;" alt="calculator" /> 
  <img src="assets/48px/clipboard.png" style="top:340px;left:240px;" alt="clipboard" /> 
  <img src="assets/48px/console.png" style="top:340px;left:310px;" alt="console" /> 
  <img src="assets/48px/basketball.png" style="top:340px;left:380px;" alt="basketball" /> 
  <img src="assets/48px/facebook.png" style="top:400px;left:100px;" alt="facebook" /> 
  <img src="assets/48px/gift.png" style="top:400px;left:170px;" alt="gift" /> 
  <img src="assets/48px/id_card.png" style="top:400px;left:240px;" alt="id card" /> 
  <img src="assets/48px/imac.png" style="top:400px;left:310px;" alt="imac" /> 
  <img src="assets/48px/system_monitoring.png" style="top:400px;left:380px;" alt="system monitoring" /> 
</p>

핵심 CSS 스타일
CSS3 기반이 없는 친구 , 제발 CSS3를 먼저 이해하십시오. 그렇지 않으면 다음 CSS를 JS에 작성하기가 어려울 것입니다.

/*----------------------------
  CSS3文件夹
-----------------------------*/
.folder {
  /* This will enable the 3D effect. Decrease this value 
   * to make the perspective more pronounced: */
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 160px;
  height: 120px;
  margin: -100px 0 0 -60px;
.folder p{
  width:150px;
  height:115px;
  background-color:#93bad8;
  /* 3D变化保留元素的位置 */
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  /*平滑的动画过渡 */
  -webkit-transition:0.5s;
  -moz-transition:0.5s;
  transition:0.5s; 
  /*禁止用户选中元素*/
  -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none; 
  top:0;
  left:50%;
  margin-left:-75px;
}
.folder .front{
  /*圆角，X轴3D转换30度 */
  border-radius:5px 5px 0 0;
  -moz-transform:rotateX(-30deg);
  -webkit-transform:rotateX(-30deg);
  transform:rotateX(-30deg);
   /*定义在X轴与Y轴的位置 */
  -moz-transform-origin:50% 100%;
  -webkit-transform-origin:50% 100%;
  transform-origin:50% 100%;
   /*定义渐变效果 */
  background-image: -moz-linear-gradient(top, #93bad8 0%, #6c9dc0 85%, #628faf 100%);
  background-image: -webkit-linear-gradient(top, #93bad8 0%, #6c9dc0 85%, #628faf 100%);
  background-image: linear-gradient(top, #93bad8 0%, #6c9dc0 85%, #628faf 100%);
   /*定义阴影 */
  box-shadow:0 -2px 2px rgba(0,0,0,0.1), 0 1px rgba(255,255,255,0.35) inset; 
  z-index:10;  
  font: bold 26px sans-serif;
  color: #5A88A9;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);
  line-height: 115px;
}
.folder .back{
   /*定义渐变效果 */
  background-image: -webkit-linear-gradient(top, #93bad8 0%, #89afcc 10%, #5985a5 60%);
  background-image: -moz-linear-gradient(top, #93bad8 0%, #89afcc 10%, #5985a5 60%);
  background-image: linear-gradient(top, #93bad8 0%, #89afcc 10%, #5985a5 60%);
   
  /*定义圆角*/
  border-radius:0 5px 0 0;
  /*定义阴影 */
  box-shadow:0 -1px 1px rgba(0,0,0,0.15);
}
 
 /*在.back前加上内容 */
.folder .back:before{
  content:'';
  width:60px;
  height:10px;
  border-radius:4px 4px 0 0;
  background-color:#93bad8;
  position:absolute;
  top:-10px;
  left:0px;
  box-shadow:0 -1px 1px rgba(0,0,0,0.15);
}
 
 /*在.back后加上内容 */
.folder .back:after{
  content:'';
  width:100%;
  height:4px;
  border-radius:5px;
  position:absolute;
  bottom:5px;
  left:0px;
  box-shadow:0 4px 8px #333;
}
.folder.open .front{
 /*3D转换50度 */
  -moz-transform:rotateX(-50deg);
  -webkit-transform:rotateX(-50deg);
  transform:rotateX(-50deg);
} 
/*----------------------------
  Draggable Icons
-----------------------------*/
#main img{
  position:absolute;
  cursor:move;
}

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 내용을 보려면 PHP 중국어의 다른 관련 기사를 주목하십시오. 웹사이트! 추천 자료:

jquery+php로 동적 디지털 디스플레이 효과 달성

jQuery 애니메이션 효과 이미지 캐러셀 구현(코드 포함)

위 내용은 jQuery는 드래그 앤 드롭으로 휴지통 삭제 기능을 만듭니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!