Jquery可排序错误:初始化后每次拖动项的左上偏移量错误

qij5mzcb  于 2023-01-12  发布在  jQuery
关注(0)|答案(1)|浏览(119)

我遇到了一个奇怪的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, null, 2));
            console.log('ui.originalPosition: ' + JSON.stringify(ui.originalPosition, null, 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" );
x6492ojm

x6492ojm1#

对我来说,这是通过添加

position: relative;
overflow: auto;

有关类似问题,请参见here

相关问题