jQuery的排序助手错误的位置

问题描述

我正在使用可排序的jquery来对多个部分（容器）中的元素进行排序。

我有一个可排序项目的自定义帮助程序。

$('.section').sortable({
    handle: '.handle',placeholder: 'placeholder',connectWith: '.section',scrollSpeed: 10,helper: () => {
       return (`
           <div style="width:25px;height:25px;background-color:black;border-radius:50%;">
           </div>
       `);
    },});

当我开始拖动一行时，助手会跳到页面的左侧。它应该已经位于鼠标指针上。我觉得这是由于行div中的空白0px导致的。请帮我修复它。这是我的HTML代码。

<style>
    .section {
        padding: 40px 0px;
        
    }
    .row {
        width: 80%;
        max-width: 1080px;
        position: relative;
        height: 200px;
        margin: 0;
        background-color: red;
    }
    .handle {
        position: absolute;
        top: 0;
        left: 0;
        width: 25px;
        height: 25px;
        z-index: 9;
        background-color: blue;
    }
    .placeholder {
        width: 80%;
        max-width: 1080px;
        height: 20px;
        margin: 0;
        background-color: black;
    }
</style>
<div class="section">
    <div class="row">
        <div class="handle"></div>
    </div>
    <div class="row">
        <div class="handle"></div>
    </div>
    <div class="row">
        <div class="handle"></div>
    </div>
</div>
<div class="section">
    <div class="row">
        <div class="handle"></div>
    </div>
    <div class="row">
        <div class="handle"></div>
    </div>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）