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

Question

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,
        placeholder: "ui-state-highlight",
        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,
        placeholder: "ui-state-highlight",
        over: function(event, ui) {
            $('.placeholder'+columnOneCounter).hide();
        },
        out: function(event, ui) {
            $('.placeholder'+columnOneCounter).show();
        },
        stop: function(event, ui) {
            $('.placeholder'+columnOneCounter).remove();
        }
    });
    $("#sortable"+columnTwoCounter).sortable({
        revert: true,
        placeholder: "ui-state-highlight",
        over: function(event, ui) {
            $('.placeholder'+columnTwoCounter).hide();
        },
        out: function(event, ui) {
            $('.placeholder'+columnTwoCounter).show();
        },
        stop: function(event, 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="" 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"></a></div>
</div>

JSFiddle 演示：http://jsfiddle.net/9do7xs30/3/

我尝试通过按钮在单个页面上动态插入许多可排序项。所有这些都插入了一个占位符，但如果将一个元素拖到可排序区域上，这个占位符应该会消失。我认为它可以通过 over/out/stop 函数中的事件变量来实现，但没有成功。或者可能 CSS?

Answer 1

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

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

Many sortables on one page with placeholder areas which dynamically disappear

javascript

jquery-ui

jquery-ui-sortable