一切正常但是当我将一列放入另一列时,会有一个空列,我不能再放任何东西了。
HTML
checkout scm
JS
scm
检查jsFiddle,我们从四列开始,但在拖放之后,我们有空列,我们不能插入它们,而我想这样做。
答案 0 :(得分:1)
这是工作小提琴。 问题是你在错误的元素上创建了可排序的小部件。 在.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;
}