时间戳

首页 > 解决方案 > 可排序插件，可通过拖放转换对图像进行排序

jquery-ui-sortable - 可排序插件，可通过拖放转换对图像进行排序

问题描述

我正在尝试对图像列表进行排序 - 允许按原样拖放图像。使用以下代码，当我尝试拖放时，我看到 dom 元素被重新排序，但是，实际的拖放是不可见的，这是一种非常不和谐的体验。你能告诉我我在这里缺少什么吗？

<html>
<head>
<style>
li {
  display: inline-block;
}
img{
margin:10px;
}
</style>
</head>
<body>
<div>
  <ul class="sort-photos">
    <li><img src="http://via.placeholder.com/50x100" /></li>
    <li><img src="http://via.placeholder.com/60x100" /></li>
    <li><img src="http://via.placeholder.com/70x100" /></li>
    <li><img src="http://via.placeholder.com/80x100" /></li>
    <li><img src="http://via.placeholder.com/90x100" /></li>
  </ul>
</div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable-min.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        $(".sort-photos").sortable();
        });
    </script>
</body>
</html>

https://jsfiddle.net/unodurga/tn8kuzab/

标签： jquery-ui-sortable

解决方案

推荐阅读