Jquery Sortable Bug：初始化后每次第一次拖动项目的顶部+左侧偏移错误

问题描述

我遇到了一个奇怪的 sortable 错误：

每次我点击 Manual 时，它都会append() Manual 标签 html，这是一个 sortable <ul><li></li> ... </ul> 列表

之后，如果我拖动任何 <li> 项（示例 Item 2 ），拖动的元素 left + top 偏移值第一次是错误的：

如果拖动的元素垂直移动到另一个位置或停止拖动，它会按预期工作

这是 sortable 列表的 javascript 代码片段：

var tab_html = '<ul id="featured-sortable">'+
    '  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>'+
    '  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>'+
    '  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>'+
    '  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>'+
    '  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>'+
    '  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>'+
    '  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>'+
    '</ul>';


// Append New Last Child
$(this).closest('div.setting-item').append(tab_html);

/*
|==========================================================================
| Featured sortable
|==========================================================================
*/
$( function() {

    $( "#featured-sortable" ).sortable({
        // cursorAt: { top: 0,left: 0 },start: function(e,ui)
        {
            console.log('ui.offset: ' + JSON.stringify(ui.offset,null,2));
            console.log('ui.position: ' + JSON.stringify(ui.position,2));
            console.log('ui.originalPosition: ' + JSON.stringify(ui.originalPosition,2));

            let target = $( event.target );

            console.log('target.css(top): ' + target.css('top'));
            console.log('target.css(left): ' + target.css('left'));

        },sort: function(e,ui)
        {
            let target = $( event.target );

            console.log('target.css(top): ' + target.css('top'));
            console.log('target.css(left): ' + target.css('left'));

            // ui.originalPosition.top = target.css('top');
            // ui.originalPosition.left = target.css('left');
        }
    }).disableSelection();


} );

// Refresh Featured-Sortable
$( "#featured-sortable" ).sortable( "refresh" );

解决方法

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

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

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