如何设计 rubaxa 可排序元素的初始位置

Question

我使用 rubaxa 的可排序库创建可排序元素。我想在元素完全移动之前自定义元素初始位置的样式，例如 this sortable

背景为带虚线边框的天蓝色。

HTML

<ul id="sortableContent">
    <li class="input-group fileItem">
        <div class="input-group">
            <input class="form-control inputItem" name="page_content[]" type="text"><span class="rm-content input-group-addon"><i class="fa fa-times"></i></span><span class="mv-content input-group-addon"><i class="fa fa-arrows"></i></span>
        </div>
    </li>
    <li class="input-group fileItem">
        <div class="input-group">
            <input class="form-control inputItem" name="page_content[]" type="text"><span class="rm-content input-group-addon"><i class="fa fa-times"></i></span><span class="mv-content input-group-addon"><i class="fa fa-arrows"></i></span>
        </div>
    </li>
</ul>

CSS

.input-group .form-control {
  position: relative;
  z-index: 2;
  float: left;
  width: 100%;
  margin-bottom: 0;
}
.input-group .form-control:not(:first-child):not(:last-child),
#sortableContent .input-group-addon:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.input-group .form-control:first-child,
.input-group-addon:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
#sortableContent .input-group-addon {
  width: 1%;
}
#sortableContent .input-group-addon {
    padding: 5px 7px;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    background-color: #fff;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-left: none;
}

#sortableContent li, #sortableContent div, #sortableContent input {
    width: 100%;
}


#sortableContent { margin-bottom: 15px; padding-left: 0;}
#sortableContent li.fileItem { list-style: none; margin: 5px 0; }
#sortableContent li:last-child, #sortableContent li.fileItem .input-group { margin-bottom: 0; }
#sortableContent li.fileItem .rm-content { border-left-style: none; cursor: pointer; color: red; }
#sortableContent li.fileItem .rm-content:hover { background: #ccc; }
#sortableContent li.fileItem .mv-content { z-index: 1000; cursor: move; cursor: -webkit-grabbing; }

这里是jsfiddle.

Answer 1

您要查找的是 ghostClass 选项：

var sortable = new Sortable(el, {
    ...
    ghostClass = 'my-custom-class',
    ...
})

只需让 'my-custom-class' 拥有您想要的 css（和名称），这就是中间拖动的样子。

如何设计 rubaxa 可排序元素的初始位置

how to styling initial place of rubaxa sortable element

html

javascript

css

rubaxa-sortable