拖放Bug

Question

更新：找到有关错误http://bugs.jqueryui.com/ticket/5718的此故障单。我尝试了这个位置：绝对但它打破了html上的数据

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

请注意，当我拖动互联网时，它会排在最前面。

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

以下是拖放代码：

 <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">