Javascript 使用jQuery UI sortable div时显示占位符

我已经在引导页面中用jqueryui声明了一个可排序的项列表

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

每个可拖动元素都是一列，例如从col-md-12向下到col-md-4。当我拖动一个元素时，我希望占位符保留我正在拖动的元素的col-md-x。如果我设置一个placehollder css，我必须将其默认为12到4之间的一个大小。默认情况下，jQuery只是将.ui可排序占位符添加到已经存在的类中，该占位符可以执行我想要的操作。此外，它还添加了一个style=“display:none”，这意味着我看不到占位符

$("#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');
    }
});

当前占位符如下所示

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

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

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

---

有人对此有解决办法吗？

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

$("#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');
    }
});

---

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

$("#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');
    }
});

---

以下是您的解决方案：

$（'#可排序'）。可排序({
项目：“.row>div”，
占位符：“ui状态突出显示”，
结束：功能（事件、用户界面）{
var cl=ui.item.attr（'class'）；
$（'.ui状态突出显示'）.addClass（cl）；
}
}).disableSelection（）以下是您的解决方案：


$（'#可排序'）。可排序({
项目：“.row>div”，
占位符：“ui状态突出显示”，
结束：功能（事件、用户界面）{
var cl=ui.item.attr（'class'）；
$（'.ui状态突出显示'）.addClass（cl）；
}
}).disableSelection（）不确定我是否理解该问题。您正在使用排序表中的占位符选项吗？您的jQuery没有反映出这一点。我没有使用该选项，因为当我使用该选项时，它会覆盖占位符的所有其他类，并且我会丢失定义占位符正确宽度的col-md-12、col-md-4或任何内容。当我不定义“占位符”时，它只会将ui可排序占位符添加到div中已经存在的所有其他类中。基本上，我希望占位符保留正在拖动的元素的类，如果我定义占位符，我不知道如何做。我不确定我是否理解这个问题。您正在使用排序表中的占位符选项吗？您的jQuery没有反映出这一点。我没有使用该选项，因为当我使用该选项时，它会覆盖占位符的所有其他类，并且我会丢失定义占位符正确宽度的col-md-12、col-md-4或任何内容。当我不定义“占位符”时，它只会将ui可排序占位符添加到div中已经存在的所有其他类中。基本上，我希望占位符保留正在拖动的元素的类，如果我定义占位符，我不知道如何做。如果您想要高度，然后，您需要计算ui.item的高度，并应用于同一函数中的占位符。如果要从停止事件中删除添加的类remove。如果需要高度，则需要计算ui.item的高度并应用于同一函数中的占位符。如果要删除添加的类，请从停止事件中删除。