我想实现此动画-将图像放到容器中时,http://jsfiddle.net/Lgqrvwum/。
我有一个回收站和照片网格,当我拖动一张照片以回收站容器时,它应该消失并导致smoke animation。
$("#photo-grid").sortable({
connectWith: ".trash",
update: function (event, ui) {
var order = $(this).sortable("serialize");
},
helper: "clone",
});
$(".trash").droppable({
accept: "#photo-grid>img",
hoverClass: "dropAreaHover",
drop: function (event, ui) {
ui.draggable.remove();
},
});
您的示例不完整。我创建一个基于以下示例的示例:https://jqueryui.com/droppable/#photo-manager
请考虑以下示例:https://jsfiddle.net/Twisty/qh3nmoL1/23/
HTML
<div class="ui-widget ui-helper-clearfix">
<ul id="gallery">
<li>discard</li>
<li>discard</li>
<li>discard</li>
<li>discard</li>
<li>discard</li>
<li>discard</li>
<li>discard</li>
<li>discard</li>
<li>discard</li>
<li>discard</li>
<li>discard</li>
<li>discard</li>
</ul>
</div>
<div id="trash" class="ui-widget-content ui-state-default">
<h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
</div>
CSS
#puff {
cursor: pointer;
display: none;
position: absolute;
height: 32px;
width: 32px;
background: url(http://i.imgur.com/wvPeK.png) no-repeat;
}
ul {
padding: 0;
font-family: Arial, sans-serif;
}
li {
list-style: none;
background: #eee;
border: 1px solid #ddd;
cursor: pointer;
float: left;
margin: 5px;
padding: 15px;
}
#trash {
float: right;
width: 32%;
min-height: 18em;
padding: 1%;
}
#trash h4 {
line-height: 16px;
margin: 0 0 0.4em;
}
#trash h4 .ui-icon {
float: left;
}
#trash .gallery h5 {
display: none;
}
JavaScript
$(function() {
function deleteImage($item) {
$item.fadeOut(function() {
var $list = $("ul", $trash).length ?
$("ul", $trash) :
$("<ul class='gallery ui-helper-reset'/>").appendTo($trash);
});
$("<div>", {
id: "puff",
style: "display: none;"
})
.appendTo("body")
.position({
my: "center",
at: "center",
of: $item
})
.fadeIn("fast")
.delay(10)
.fadeOut("slow", function() {
$item.remove();
$(this).remove();
});
}
$("#gallery li").draggable({
revert: "invalid",
containment: "document",
cursor: "move"
});
$("#trash").droppable({
accept: "ul > li",
classes: {
"ui-droppable-active": "ui-state-highlight"
},
drop: function(event, ui) {
deleteImage(ui.draggable);
}
});
});
尚不清楚在jQuery UI中要使用很多动画时为什么要使用自己的动画功能。当您已经计划使用拖放功能时,只需使用已有的内容即可。还创建了级联并内置了回调,因此您可以更轻松地正确地链接事件。