javascript - 拖放错误

Question

更新:找到这张关于错误的票证 http://bugs.jqueryui.com/ticket/5718 .我尝试了 position:absolute 但它破坏了 html 上的数据

我已经在我的应用程序中实现了拖放操作来对数据进行排序。拖动数据时，它必须与其他数据对齐。但在下图中。

请注意，当我拖动 Internet 时，它会位于顶部。

拖动时必须与他人对齐。如何解决这个问题？有没有办法让数据在拖动时必须在光标中，而不是在顶部？

下面是拖放代码:

 <script>
    var addPositions = function() {
        $('.dropenv, .dropcat').each(function() {
            var position = 0;
            $(this).children().each(function() {
                $(this).data('position', position);
                position++;
            });
        });
    };

    $(document).ready(function() {
        addPositions();

        $(".dropenv").sortable({
            connectWith: "tbody.env-data",
            dropOnEmpty: true,
            handle: '.env-handle',
            start: function(event, ui) {
                parentID = ui.item.parent().siblings('tr').attr('id');
            },
            stop: function(event, ui) {
                datas = new Array();
                var i = 0;

                ui.item.closest('tbody').children('tr').each(function() {
                    datas[i] = $(this).attr('id');
                    i++;
                });

                $.ajax({
                    type: "POST",
                    data: { 
                        'cat_id': parentID,
                        'env[]': datas, 
                        'csrfmiddlewaretoken': '{{ csrf_token }}'
                    }, 
                    url:"/envelopes/sort/",
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    success: function(data) { 
                        notify('', data, { autoClose: true, delay: 1000 });
                    },
                    error: function(ts) { 
                        notify('', ts.responseText, { autoClose: true, delay: 1000 });
                    }
                });
            }
        });

        $( ".dropcat").sortable({
            connectWith: "tbody.cat-data",
            dropOnEmpty: true,
            handle: '.cat-handle',
            update: function(){
                datas = new Array();
                var i = 0;

                $('.dropcat tr.masterList').each(function() {
                    datas[i] = $(this).attr('id');
                    i++;
                });

                $.ajax({
                    type: "POST",
                    data: { 
                        'cat[]': datas, 
                        'csrfmiddlewaretoken': '{{ csrf_token }}'
                    }, 
                    url:"/envelopes/categories/sort/",
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    success: function(data) { 
                        notify('', data, { autoClose: true, delay: 1000 });
                    },
                    error: function(ts) { 
                        notify('', ts.responseText, { autoClose: true, delay: 1000 });
                    }
                });
            }
        });
    });
    </script>

Answer 1

找到答案:overflow:auto

<table class="simple-table responsive-table" style="overflow:auto">