Question

我在引导页面中使用jQuery UI声明了一个可排序的项目列表。

$("#ReportContainer").sortable({
  helper: 'clone',
  revert: 'invalid',
});

每个可拖动元素是一列，例如col-md-12降至col-md-4。当我拖动一个元素时，我希望占位符保留我拖动的元素的col-md-x。如果我设置了一个placehollder css，我必须将它默认为12到4之间的一个大小。默认情况下，jQuery只是将.ui-sortable-placeholder添加到已经存在的类中，除了它之外它还会添加一个样式=“display：none”表示我看不到占位符。

目前占位符看起来像这样

 <div class="col-md-x ui-sortable-placeholder" style="display: none"></div>

如果我设置一个占位符，它将丢弃所有col-md-x类并使用它。 e.g。

<div class="myPlaceholder"></div>

有没有人可以解决这个问题？

Answer 1

当我开始拖动元素时，将占位符设置为可见。这允许我保留原始类并显示占位符。

$("#ReportContainer").sortable({
  helper: 'clone',
  revert: 'invalid',
  /*placeholder: 'ui-sortable-placeholder',*/
  start: function(e, ui){
        ui.placeholder.height(ui.item.height());
        ui.placeholder.css('visibility', 'visible');
    }
});

Answer 2

以下是您的解决方案：

    $('#sortable').sortable({
        items: ".row > div",
        placeholder: 'ui-state-highlight',
        over: function(event, ui) {
        		var cl = ui.item.attr('class');
        		$('.ui-state-highlight').addClass(cl);
    		}
    }).disableSelection();

在这里工作小提琴：

http://jsfiddle.net/kmb23z36/3/

使用jQuery UI可排序div时显示占位符

2 个答案: