how to styling initial place of rubaxa sortable element

Question

I create sortable element using rubaxa's sortable library. I want to custom the style of element's initial place before it completely moved, like this sortable

where it background is azure with dashed border.

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; }

Here the jsfiddle.

Answer 1

What you're looking for is the ghostClass option:

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

Just make 'my-custom-class' have the css you want (and name) and that's what it will look like mid drag.