javascript - 放置时如何在元素上实现动画?jQuery UI
问题描述
我想在将图像拖放到容器时实现这个动画 - http://jsfiddle.net/Lgqrvwum/ 。
我有一个回收站和照片网格,当我将其中一张照片拖到回收站容器时,它应该会消失并导致烟雾动画。
$("#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 中有很多要使用的东西时,为什么要使用自己的动画功能还不清楚。由于您已经计划使用拖放,所以只需使用已有的内容。还创建了级联并内置了回调,因此您可以更轻松地正确链接事件。
推荐阅读
- c++ - 所有大小为 k 的子数组的最大值
- angular - Angular Unit Testing面临初始化表单和订阅表单值变化的问题
- javascript - 未捕获的语法错误:标识符“URL”已被声明
- r - 如何反转小标题中变量的顺序?
- css - Bootstrap 4 - 如何对齐左侧的一个按钮和右侧的其余元素?
- elasticsearch - 如何突出显示 Elasticsearch 中与字符串匹配的所有值
- unit-testing - 如何使用 spock 模拟 3rd 方 api 调用的静态方法?
- reactjs - 将画布从 React Konva 导出为 SVG 和 PDF?
- powershell - PowerShell AD 组详细信息
- asp.net-core - 使用 ProjectTo<> 时缺少从“对象”到“对象”的映射