一切正常,但是当我将一列放到另一列中时,有一个空列,我再也不能放任何东西了。
的HTML
<div class="wrap">
<div class="column">
<div class="portlet">
<div class="portlet-header">Feeds</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">News</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">Shopping</div>
<div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">Links</div>
<div class="portlet-content"><img src="https://s-media-cache-ak0.pinimg.com/736x/12/64/da/1264da4a3f18207dc22592102abae40d--frangipani-tattoo-plumeria-flowers.jpg"></div>
</div>
</div>
</div>
JS
$(".wrap").sortable({
connectWith: ".column",
items: '.portlet',
placeholder: 'ui-state-highlight',
forcePlaceholderSize: true,
distance: 0.5,
dropOnEmpty: true
});
$(".portlet").resize(function() {
$(".portlet").css("height", "auto");
});
$(".portlet").resizable().addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-all")
.prepend("<span class='ui-icon ui-icon-minusthick'></span>")
.end()
.find(".portlet-content");
$(".portlet-header .ui-icon").click(function () {
$(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
$(this).parents(".portlet:first").find(".portlet-content").toggle();
});
$(".column").disableSelection();
选中jsFiddle,我们从四列开始,但是在拖放之后,我们有空列,我们无法插入它们,而我想这样做。
最佳答案
这是工作中的小提琴。
问题是您在错误的元素上创建了可排序的小部件。
在.column元素上创建它可以使其正常工作。
http://jsfiddle.net/WFPaj/124/
$(function () {
$(".column").sortable({
connectWith: ".column",
items: '.portlet',
placeholder: 'ui-state-highlight',
forcePlaceholderSize: true,
distance: 0.1,
dropOnEmpty: true
});
$(".portlet").resize(function() {
$(".portlet").css("height", "auto");
});
$(".portlet").resizable().addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
.find(".portlet-header")
.addClass("ui-widget-header ui-corner-all")
.prepend("<span class='ui-icon ui-icon-minusthick'></span>")
.end()
.find(".portlet-content");
$(".portlet-header .ui-icon").click(function () {
$(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
$(this).parents(".portlet:first").find(".portlet-content").toggle();
});
$(".column").disableSelection();
})
CSS:
.column {
float: left;
padding-bottom: 100px;
background: #eee;
margin: 10px;
min-width: 190px;
}
相关问题:
jQuery UI drop on empty container/list not working