이 기사에서는 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 빌드
<div id="main"> <div class="folder"> <div class="front"></div> <div class="back"></div> </div> <img src="assets/48px/jQuery_jquery를 기반으로 아이콘을 휴지통으로 드래그하고 삭제하는 기능을 구현합니다..png" style="max-width:90%" alt="jQuery_jquery를 기반으로 아이콘을 휴지통으로 드래그하고 삭제하는 기능을 구현합니다." /> <img src="assets/48px/calculator.png" style="max-width:90%" alt="calculator" /> <img src="assets/48px/clipboard.png" style="max-width:90%" alt="clipboard" /> <img src="assets/48px/console.png" style="max-width:90%" alt="console" /> <img src="assets/48px/basketball.png" style="max-width:90%" alt="basketball" /> <img src="assets/48px/facebook.png" style="max-width:90%" alt="facebook" /> <img src="assets/48px/gift.png" style="max-width:90%" alt="gift" /> <img src="assets/48px/id_card.png" style="max-width:90%" alt="id card" /> <img src="assets/48px/imac.png" style="max-width:90%" alt="imac" /> <img src="assets/48px/system_monitoring.png" style="max-width:90%" alt="system monitoring" /> </div>
핵심 CSS 스타일
CSS3 기초가 없는 친구들은 CSS3를 먼저 이해해주세요. 그렇지 않으면 다음 CSS가 어려울 것입니다
/*---------------------------- CSS3文件夹 -----------------------------*/ .folder { /* This will enable the 3D effect. Decrease this value * to make the perspective more pronounced: */ -webkit-perspective: 800px; -moz-perspective: 800px; perspective: 800px; /*镜头距离800PX*/ position: absolute; top: 50%; left: 50%; z-index: 0; width: 160px; height: 120px; margin: -100px 0 0 -60px; } .folder div{ width:150px; height:115px; background-color:#93bad8; /* 3D变化保留元素的位置 */ -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; 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; position:absolute; 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%); /*定义阴影 */ jQuery_jquery를 기반으로 아이콘을 휴지통으로 드래그하고 삭제하는 기능을 구현합니다.-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; /*定义阴影 */ jQuery_jquery를 기반으로 아이콘을 휴지통으로 드래그하고 삭제하는 기능을 구현합니다.-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; jQuery_jquery를 기반으로 아이콘을 휴지통으로 드래그하고 삭제하는 기능을 구현합니다.-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; jQuery_jquery를 기반으로 아이콘을 휴지통으로 드래그하고 삭제하는 기능을 구현합니다.-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; }
JS 작성
$(function() { var folder = $("#main .folder"), //文件夹 front = folder.find('.front'), //文件夹前面部分 img = $("#main img"), //容器main中的所有图片 droppedCount = 0; //记数器 img.draggable(); //使所有图片可以拖拽 folder.droppable({ //droppable事件,即拖拽到文件夹时触发的事件 drop : function(event, ui) {//释放时触发 // 移动拖拽的图片 ui.draggable.remove(); // 给计数器加1 front.text(++droppedCount); }, activate : function(){ //拖拽时让文件夹打开 folder.addClass('open'); }, deactivate : function(){ //停止拖拽时让文件夹关闭 folder.removeClass('open'); } }); });
소스 코드 다운로드: jQuery는 작은 아이콘을 끌어서 삭제하는 휴지통 기능을 구현합니다
위 내용은 아이콘을 휴지통으로 드래그하고 삭제하는 기능을 구현하는 튜토리얼입니다. 읽어주셔서 감사합니다. 모든 분들의 학습에 도움이 되기를 바랍니다.