jQuery可排序-已拖动但未显示
我正在使用jQuery Sortable插件创建排名列表,该功能几乎100%正常工作,但我对“拖拽”项存在问题 我单击一个项目并可以拖动它-您也可以看到占位符,但无法看到正在拖动的透明当前项目 我可以用Chrome开发工具跟踪它,但它好像是完全看不见的 这是我的密码: HTMLjQuery可排序-已拖动但未显示,jquery,css,jquery-ui,jquery-ui-sortable,Jquery,Css,Jquery Ui,Jquery Ui Sortable,我正在使用jQuery Sortable插件创建排名列表,该功能几乎100%正常工作,但我对“拖拽”项存在问题 我单击一个项目并可以拖动它-您也可以看到占位符,但无法看到正在拖动的透明当前项目 我可以用Chrome开发工具跟踪它,但它好像是完全看不见的 这是我的密码: HTML <section class="ranking"> <div class="ranking-wrap"> <h3>How would you rank each des
<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>
有人知道是什么搞砸了。拖拽的东西吗?我哪里错了
我正在使用此插件:
任何帮助都将不胜感激 只需为js添加广告或创建完整的代码片段。您需要查看用于此目的的JavaScript代码。
#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%;
}