Question

我正在使用Rubaxa Sortable库，但是在Chrome有时甚至是FF上，我一直都遇到以下问题：

当我在Chrome上单击并拖动该div时，该div的位置保持突出显示，而不是div本身，这会引起混乱。例如，如果我有一个列表

DIV1 第2版 DIV3

然后我单击并向上拖动DIV3，DIV2移至先前的DIV3位置，看起来DIV2突出显示了。它一直在Chrome上运行，有时在FF上运行。

有一个jsfiddle。

<script src="https://zeptojs.com/zepto.js"></script>
<script src="https://raw.githack.com/RubaXa/Sortable/master/Sortable.js"></script>
<div id="foo" class="boo">

    <div class="something1" id="1"><span>DIVA</span><span>1</span><span>2</span><span>3</span></div>
    <div class="something1" id="2"><span>DIVB</span><span>4</span><span>5</span><span>6</span></div>
    <div class="something1" id="3"><span>DIVC</span><span>7</span><span>8</span><span>9</span></div>
    <div class="something1" id="4"><span>DIVD</span><span>X</span><span>Y</span><icon>Z</icon></div>


</div>

<script>
var sortable = Sortable.create(foo, {
  group: 'foo',
  animation: 50,
  //forceFallback: true
});</script>

<style>
.something1 icon {
    visibility: hidden;
}

.something1:hover icon {
    visibility:visible;
}

#foo div:hover {
    background-color: rgba(50,50,140,0.25); 
}

#foo .sortable-ghost {
    background-color: rgba(50,50,140,0.25); 
}

#foo .sortable-fallback {
    background-color: rgba(50,50,140,0.25); 
}
</style>

有一种方法可以通过启用forceFallback来解决此问题：是的，但是动画变得不连贯，而且看起来并不好看。

拖动旧项目时，位置保持突出显示状态（Chrome）

0 个答案: