1

更新: バグhttp://bugs.jqueryui.com/ticket/5718に関するこのチケットを見つけました。position:absolute を試してみましたが、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>
4

1 に答える 1

2

答えを見つけました：overflow:auto

<table class="simple-table responsive-table" style="overflow:auto">
于 2013-03-15T13:46:47.357 に答える