jquery拖拽怎么删除移动

发布网友 发布时间：2022-04-23 04:39

我来回答

共2个回答

懂视网 时间：2022-05-15 08:28

这次给大家带来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/.png" style="top:400px;left:100px;" alt="" /> 
 <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会吃力

/*----------------------------
 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%, #afcc 10%, #5985a5 60%);
 background-image: -moz-linear-gradient(top, #93bad8 0%, #afcc 10%, #5985a5 60%);
 background-image: linear-gradient(top, #93bad8 0%, #afcc 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;
}

写入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');
 }
 });
});

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

jquery+php实现动态数字显示效果

jQuery动画效果图片轮播实现（附代码）

热心网友 时间：2022-05-15 05:36

function doRefresh() {
window.location.reload();
}
$(function(){
var changed = false;
$("tbody").sortable({
opacity: 0.5,//拖动的透明度
revert: true, //缓冲效果
cursor: 'move', //拖动的时候鼠标样式
start:function(event, ui){
if(navigator.userAgent.toLowerCase().match(/firefox/)&&ui.helper!=undefined){
ui.helper.css('position','absolute').css('mergin-top',$(window).scrollTop());
//当滚动条滚动时关联事件
$(window).bind('scroll.sortableplaylist',function(){
ui.helper.css('position','absolute').css('mergin-top',$(window).scrollTop());
});
}
},
beforeStop:function(event, ui){
$(window).bind('scroll.sortableplaylist',function(){
ui.helper.css('position','absolute').css('mergin-top',0);
});
},
helper:function(e,ui){//设置拖动时辅助显示帮助
ui.children().each(function(){
$(this).width($(this).width());
});
return ui;
},
scroller:true,
change : function(event,ui){
changed = true;
},
stop:function(event,ui){//允许滚动显示
//在拖动排序停止时可以保存排序
if(changed){
var currObj = ui.item;
var currId = currObj.attr("id");
var prevId = currObj.prev().attr("id");
var nextId = currObj.next().attr("id");
if(undefined==prevId){
prevId=0;
}
if(undefined==nextId){
nextId=0;
}
$.post(ROOT_PATH+"questions/question/"+currId+"/order",{prevId:prevId,nextId:nextId},function(data){
if(data==1){
doRefresh();
}
});
}
}
}).disableSelection();
});