Question

我有一个很好的卡片堆栈，我希望卡片可以排序。为了堆叠卡片，他们有一个负的底部边缘，这会影响排序。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
</ul>

<style>
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    width: 347px;
    height: 226px;
    box-sizing: border-box;
    padding: 3px 20px 10px 20px;
    margin-bottom: -120px;
    border: solid 1px #F00;
    background-color: #FFF;
    transform: skewX(-2deg);
   }
   li:not(:last-child) {
     margin-bottom: -191px;
  }
</style>

<script>
  $(function() {
    $("ul").sortable({});
  });
</script>

我已经尝试了几个小时，但无法解决问题。有没有人有想法，可能是以不同的方式堆叠卡片或使用可排序的事件来修复行为？

非常感谢

Answer 1

好吧，我明白了：https://jsfiddle.net/vLfumdwb/4/

li {
  width: 347px;
  height: 35px;
}
li div {
  width: 100%;
  height: 226px;
  ...
}

我无法用javascript改变任何东西，但是以不同的方式绘制卡片的技巧（卡片高度仅为35px，内部div高度为226px而不是高度为226px且底部边缘为-191px的卡片）。

jQuery UI可排序的可用性问题

1 个答案: