Eko Subha Eko Subha - 1 month ago 10
CSS Question

how to styling initial place of rubaxa sortable element

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

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.