jQuery Sortable - 拖动不显示

Question

我正在使用jQuery Sortable插件进行排名列表，功能几乎达到了100％，但我遇到了“拖动”项目的问题。

我单击一个项目并且我可以拖动它 - 您也可以看到占位符，但是您无法看到正在拖动的透明当前项目。

我可以使用Chrome Dev工具跟踪它，但它就像它完全不可见。

这是我的代码：

HTML

<section class="ranking">
    <div class="ranking-wrap">
    <h3>How would you rank each design?</h3>
    <ol id="rank-list">
        <li>Design <strong>A</strong> 
        <label for="rank-1" class="offscreen">Rank of design 1</label>
                        <input type="number" id="rank-1" value="1" name="rank1"> 
                    </li>
        <li>Design <strong>B</strong>
                        <label for="rank-2" class="offscreen">Rank of design 2</label>
                        <input type="number" id="rank-2" value="2" name="rank2">
                    </li>
        <li>Design <strong>C</strong>

                        <label for="rank-3" class="offscreen">Rank of design 3</label>
                        <input type="number" id="rank-3" value="3" name="rank3">
                    </li>
        <li>Design <strong>D</strong>
                        <label for="rank-4" class="offscreen">Rank of design 4</label>
                        <input type="number" id="rank-4" value="4" name="rank4">
                    </li>
        <li>Design <strong>E</strong>
                        <label for="rank-5" class="offscreen">Rank of design 5</label>
                        <input type="number" id="rank-5" value="5" name="rank5">                
                    </li>
                </ol>
                </div>
    </section>

CSS

    #rank-list {
    list-style: none;
    padding: 0;
}

#rank-list li { 
    position: relative; 
    min-height: 1em;
    cursor: move;
    font-family: "FS Humana Light";
    font-size: 1.6rem;
    padding: .5em .5em .5em 2.5em;
    background: rgba(238,238,238, .8);
    border: 1px solid #464646;
    margin: .25em auto;
    border-radius: .25em;
    text-align: center;
    max-width: 10em;
}

.sm-logo-img {
    width: 32%;
    display: inline-block;
    padding: 0.5rem;
    margin: -1.5rem auto -2.2rem 0.5rem;
}

#rank-list li input{
    position: absolute;
    left: 1em;
    top: 0;
    background: transparent;
    border: 0;
    border-right: 1px solid #464646;
    font-family: FSHumanaBold, sans-serif;
    font-size: 1rem;
    padding-right: 1em;
    text-align: center;
    width: 1.75em;
    height: 99%;
}

.dragged {
   position: absolute;
   opacity: 0.5;
   z-index: 2000;
   top: 0;
  left: 5rem;
}

#rank-list li.placeholder {
    position: relative;
    background: rgba(72, 70, 65, .6);
    height: 100%;
}

任何人都有任何想法弄乱.dragged项目或我错在哪里？

我正在使用此插件：http://johnny.github.io/jquery-sortable/#docs

任何帮助都会非常感激！