一页上有许多可排序项，带有占位符区域，这些区域会动态消失

问题描述

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();
   }
});