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', 
    ... 
}) 

ただ「私のカスタムクラスは、」あなたが欲しいCSS（と名前）を持たせると、それはそれは半ばドラッグどのように見えるかです。