如何解决一页上有许多可排序项,带有占位符区域,这些区域会动态消失
JS
var placeholderCounter = 1;
$(function () {
$("#sortable0").sortable({
revert: true,placeholder: "ui-state-highlight",over: function() {
$('#sortable0 .placeholder').hide();
},out: function() {
$('#sortable0 .placeholder').show();
},stop: function() {
$('#sortable0 .placeholder').remove();
}
});
$(".draggable").draggable({
connectToSortable: ".sortable",helper: "clone",revert: "invalid",stop: function (event,ui) {
ui.helper.append("<a class=\"delete\">X</a>")
}
});
$("ul,li").disableSelection();
});
$(".newSectionOne").click(function () {
$(".mail-area").last("ul").after().append("</ul><ul class=\"sortable ui-sortable\" id=\"sortable"+placeholderCounter+"\">\n" +
"<li class=\"ui-state-highlight ui-sortable-handle placeholder"+placeholderCounter+"\" id='placeholder"+placeholderCounter+"'>Drop Items here</li>\n" +
"</ul>");
$("#sortable"+placeholderCounter).sortable({
revert: true,over: function(event,ui) {
$('.placeholder'+placeholderCounter).hide();
},out: function(event,ui) {
$('.placeholder'+placeholderCounter).show();
},stop: function(event,ui) {
$('.placeholder'+placeholderCounter).remove();
}
});
placeholderCounter++;
});
$(".newSectionTwo").click(function () {
var columnOneCounter = placeholderCounter;
placeholderCounter++;
var columnTwoCounter = placeholderCounter;
placeholderCounter++;
$(".mail-area").last("ul").after().append("</ul><div class='row'><div class='col-md-6'><ul class=\"sortable ui-sortable\" id=\"sortable"+columnOneCounter+"\">\n" +
"<li class=\"ui-state-highlight ui-sortable-handle placeholder"+columnOneCounter+"\">Drop Items here</li>\n" +
"</ul></div><div class='col-md-6'><ul class=\"sortable ui-sortable\" id=\"sortable"+columnTwoCounter+"\">\n" +
"<li class=\"ui-state-highlight ui-sortable-handle placeholder"+columnTwoCounter+"\">Drop Items here</li>\n" +
"</ul></div></div>");
$("#sortable"+columnOneCounter).sortable({
revert: true,ui) {
$('.placeholder'+columnOneCounter).hide();
},ui) {
$('.placeholder'+columnOneCounter).show();
},ui) {
$('.placeholder'+columnOneCounter).remove();
}
});
$("#sortable"+columnTwoCounter).sortable({
revert: true,ui) {
$('.placeholder'+columnTwoCounter).hide();
},ui) {
$('.placeholder'+columnTwoCounter).show();
},ui) {
$('.placeholder'+columnTwoCounter).remove();
}
});
});
$(document.body).on("click",".delete",function () {
$(this).parent().remove();
});
HTML
<div class="mail-area">
<ul class="sortable ui-sortable" id="sortable0">
<li class="ui-state-highlight placeholder">Drop Items here</li>
</ul>
</div>
<div class="btn">
<a class="newSectionOne">One Column</a>
</div>
<div class="btn">
<a class="newSectionTwo">Two Column</a>
</div>
<hr>
<div class="draggable">
<div align="center"><a href="$1" class="button button--green" style="background:#44AD34;border-radius:4px;box-shadow:0 4px 12px 0 rgba(68,173,52,.24);color:#FFF!important;display:inline-block;font-family:Helvetica,Arial,sans-serif;font-size:17px;font-weight:500;line-height:1.3;margin-bottom:16px;padding:13px 16px;text-align:left;text-decoration:none">$2</a></div>
</div>
JSFiddle演示:http://jsfiddle.net/9do7xs30/3/
我尝试通过按钮在单个页面上动态插入许多可排序对象。所有这些元素都插入了一个占位符,但是如果将元素拖动到可排序区域上,则该占位符应消失。 我以为可以通过over / out / stop函数中的事件变量来实现,但是没有成功。也许CSS可以做到这一点?
解决方法
通过ui.helper函数自行完成
$("#sortable0").sortable({
revert: true,placeholder: "ui-state-highlight",over: function(event,ui) {
ui.helper.parent().find('.placeholder').hide();
},out: function(event,ui) {
ui.helper.parent().find('.placeholder').show();
},stop: function(event,ui) {
ui.helper.parent().find('.placeholder').remove();
}
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。