-1
我需要在空的可排序div中放置一个placeholdertext。当div被拖入可排序的div中时，占位符文本应该消失。这是工作，但是当我删除拖动的div时，持有人不再显示。在jQuery UI中显示占位符空文本
的HTML如下
$("#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();
}
}); .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;
}<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>