使用jQuery UI将占位符文本显示为空

Question

我需要在空的可排序div中放置一个placeholdertext。当div被拖动到可排序的div中时，占位符文本应该消失。这是有效的，但是当我删除拖动的div时，占位符不再显示。

HTML在下面给出

＆＃13;

＆＃13;

  $("#origin").sortable({
        connectWith: "#drop",
          
        remove: function (event, ui) {
            debugger;
            if ($(ui.item).find(".removeButton").length == 0) {
              var removeButton = $("<span class='removeButton'>X</span>").click(function () {
                    $(ui.item).find('span').remove()
                    $(ui.item).remove();
                    $("#origin").append(ui.item);
                     
                    if ($("#drop").find('span').length > 0) {
                        $("#placeholder").show();
                    }
                    else {
                        $("#placeholder").hide();
                    }

              });

               
              if ($("#drop").find('span').length > 0)
              {
                  $("#placeholder").show();
              }
              else
               {
                  $("#placeholder").hide();
               }
                $(ui.item).append(removeButton);
            }
        },
      
       
    });



 //var removeIntent = false;
 //       $('#drop').sortable({
 //           over: function () {
 //               removeIntent = false;
 //           },
 //           out: function () {
 //               removeIntent = true;
 //           },
 //           beforeStop: function (event, ui) {
 //               if(removeIntent == true){
 //                   ui.item.remove();
 //$("#origin").append(  ui.item);
 //               }
 //           }
 //       });

   $("#drop").sortable({
       connectWith: "#origin",
       over: function () {

           
           $('#placeholder').hide();
       },
       out: function () {
             
           $('#placeholder').hide();
       },
       stop: function () {
           $('#placeholder').remove();
       }
 
   });

＆＃13;

        .removeButton {
    float:right;
    display:inline-block;
    padding:2px 5px;
    background:#ccc;
}
 
.removeButton:hover {
    float:right;
    display:inline-block;
    padding:2px 5px;
    background:#ccc;
    color:#fff;
}
        #origin {
            min-width: 10px;
            min-height: 120px;
              border: solid 1px gray;
        }

            #origin img, #drop img {
                margin-top: 3px;
                margin-left: 5px;
            }

        #drop {
            min-height: 30px;
        }

        .over {
            border: solid 5px purple;
        }

        .draggable {
            border: solid 2px gray;
            width: 140px;
        }

        #drop .draggable {
            float: left;
        }

        .fbox{
                border: solid 1px gray;
                height:40px;
            }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

 <div class="col-lg-12">
   
            <div  class="col-lg-4">
                <div id="wrapper">
                    <div id="origin"  >
                        <div id="Job" title="one" class="draggable">Job</div>
                        <div id="DeptNo" title="two" class="draggable">DeptartmentName</div>
                        <div id="LOC" title="three" class="draggable">LOC</div>
                    </div>
                    <p></p>

                </div>
        
        </div> <div class="col-lg-8"><div class="col-lg-12"><div id="drop" class="fbox"><div id="placeholder">Drag a column and drop it here to group by that column</div> </div>    <input type="Button" id="btnSubmit" value="Refresh" /></div>
            <table id="list"></table>
            <div id="pager"></div>  

        </div>

    </div>
   

＆＃13;

＆＃13;

＆＃13;

Answer 1

将>更改为==为我工作

$("#origin").sortable({
        connectWith: "#drop",

        remove: function (event, ui) {
            debugger;
            if ($(ui.item).find(".removeButton").length == 0) {
              var removeButton = $("<span class='removeButton'>X</span>").click(function () {
                    $(ui.item).find('span').remove()
                    $(ui.item).remove();
                    $("#origin").append(ui.item);

                    if ($("#drop").find('span').length == 0) { // changed '>' to '=='
                        $("#placeholder").show();
                    }
                    else {
                        $("#placeholder").hide();
                    }

              });


              if ($("#drop").find('span').length > 0)
              {
                  $("#placeholder").show();
              }
              else
               {
                  $("#placeholder").hide();
               }
                $(ui.item).append(removeButton);
            }
        },


    });



 //var removeIntent = false;
 //       $('#drop').sortable({
 //           over: function () {
 //               removeIntent = false;
 //           },
 //           out: function () {
 //               removeIntent = true;
 //           },
 //           beforeStop: function (event, ui) {
 //               if(removeIntent == true){
 //                   ui.item.remove();
 //$("#origin").append(  ui.item);
 //               }
 //           }
 //       });

   $("#drop").sortable({
       connectWith: "#origin",
       over: function () {


           $('#placeholder').hide();
       },
       out: function () {

           $('#placeholder').hide();
       },
       stop: function () {
           $('#placeholder').remove();
       }

   });

https://jsfiddle.net/pt7w5gg3/