Javascript 剑道网格：拖放后滚动到顶部

我实现了如下网格的拖放：

var mainGrid = $("#grid").kendoGrid({
    dataSource: mainDataSource,
    columns: ["id", "name", "phone"],
    scrollable: true,
    editable: true,
    navigatable: true,
    height: 200
}).data("kendoGrid");

mainGrid.table.kendoDropTarget({
    group: "gridGroup",
    drop: function (e) {

        var draggedRows = e.draggable.hint.find("tr");
        e.draggable.hint.hide();
        var dropLocation = $(document.elementFromPoint(e.clientX, e.clientY)),
            dropGridRecord = mainDataSource.getByUid(dropLocation.parent().attr("data-uid"))
            if (dropLocation.is("th")) {
                return;
            }

        var beginningRangePosition = mainDataSource.indexOf(dropGridRecord), //beginning of the range of dropped row(s)
            rangeLimit = mainDataSource.indexOf(mainDataSource.getByUid(draggedRows.first().attr("data-uid"))); //start of the range of where the rows were dragged from


        //if dragging up, get the end of the range instead of the start
        if (rangeLimit > beginningRangePosition) {
            draggedRows.reverse(); //reverse the records so that as they are being placed, they come out in the correct order
        }

        //assign new spot in the main grid to each dragged row
        draggedRows.each(function () {
            var thisUid = $(this).attr("data-uid"),
                itemToMove = mainDataSource.getByUid(thisUid);
            mainDataSource.remove(itemToMove);
            mainDataSource.insert(beginningRangePosition, itemToMove);
        });


        //set the main grid moved rows to be dirty
        draggedRows.each(function () {
            var thisUid = $(this).attr("data-uid");
            mainDataSource.getByUid(thisUid).set("dirty", true);
        });

        //remark things as visibly dirty
        var dirtyItems = $.grep(mainDataSource.view(), function (e) {
            return e.dirty === true;
        });
        for (var a = 0; a < dirtyItems.length; a++) {
            var thisItem = dirtyItems[a];
            mainGrid.tbody.find("tr[data-uid='" + thisItem.get("uid") + "']").find("td:eq(0)").addClass("k-dirty-cell");
            mainGrid.tbody.find("tr[data-uid='" + thisItem.get("uid") + "']").find("td:eq(0)").prepend('<span class="k-dirty"></span>')
        };
    }
});

var mainGrid=$（“#grid”）.kendoGrid({
数据源：主数据源，
列：[“id”、“姓名”、“电话”]，
可滚动：对，
是的，
可导航：是的，
身高：200
}).数据（“kendoGrid”）；
mainGrid.table.kendoDropTarget({
组：“网格组”，
删除：功能（e）{
var draggedRows=e.draggable.hint.find（“tr”）；
e、 draggable.hint.hide（）；
var dropLocation=$（document.elementFromPoint（e.clientX，e.clientY）），
dropGridRecord=mainDataSource.getByUid（dropLocation.parent（）.attr（“数据uid”））
if（dropLocation.is（“th”））{
回来
}
var beginningRangePosition=mainDataSource.indexOf（dropGridRecord），//被删除行范围的开始
rangeLimit=mainDataSource.indexOf（mainDataSource.getByUid（draggedRows.first（）.attr（“数据uid”）；//行从何处拖动的范围的开始
//如果向上拖动，则获取范围的结尾，而不是开始
如果（范围限制>起始范围位置）{
draggedRows.reverse（）；//反转记录，以便在放置记录时按正确的顺序显示
}
//将主栅格中的新点指定给每个拖动的行
draggedRows.each（函数（）{
var thisUid=$（this.attr（“数据uid”），
itemToMove=maindasource.getByUid（thisUid）；
mainDataSource.remove（itemToMove）；
mainDataSource.insert（起始范围位置，itemToMove）；
});
//将主栅格移动行设置为“脏”
draggedRows.each（函数（）{
var thisUid=$（this.attr（“数据uid”）；
mainDataSource.getByUid（thisUid）.set（“脏”，true）；
});
//把事情说成明显肮脏
var dirtyItems=$.grep（maindasource.view（），函数（e）{
返回e.dirty===true；
});
对于（var a=0；a

JS Fiddle:

jsfiddle.net/yagamilight1987/R2EyW/

---

向下滚动到最后一条记录。将最后一条记录拖放到上一个位置。拖放可以工作，但它会滚动到网格的顶部。

您的代码在我的项目中运行得非常好。我认为存在一些脚本问题

使用

<script src="~/Script/Jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="@Url.Content("~/Script/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Script/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Script/kendo.all.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Script/kendo.aspnetmvc.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Script/kendo.web.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Script/jquery.maskedinput-1.3.min.js")" type="text/javascript"></script>
<link href="~/Content/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/kendo.default.min.css" rel="stylesheet" type="text/css" />

查看

<div id="grid">
</div>

代码

<script type="text/javascript">
    $(document).ready(function () {

        $.fn.reverse = [].reverse; //save a new function from Array.reverse

        var data = [{
            id: 1,
            name: "Michael",
            phone: "897-894-8956"
        }, {
            id: 2,
            name: "George Michael",
            phone: "897-555-5555"
        }, {
            id: 3,
            name: "George Sr.",
            phone: "897-444-4444"
        }, {
            id: 4,
            name: "Gob",
            phone: "897-333-3333"
        }, {
            id: 5,
            name: "Lucille",
            phone: "897-222-2222"
        }, {
            id: 6,
            name: "Tobias",
            phone: "897-111-1111"
        }, {
            id: 7,
            name: "Maeby",
            phone: "897-666-6666"
        }, {
            id: 8,
            name: "Buster",
            phone: "897-777-7777"
        }, {
            id: 9,
            name: "Lindsay",
            phone: "897-888-8888"
        }];

        var dataModel = kendo.data.Model.define({
            id: "id",
            fields: {
                id: {
                    type: "number",
                    editable: false
                },
                name: {
                    type: "string",
                    editable: true
                },
                phone: {
                    type: "string",
                    editable: false
                }
            }
        });

        var mainDataSource = new kendo.data.DataSource({
            schema: {
                model: dataModel
            },
            data: data
        });

        var mainGrid = $("#grid").kendoGrid({
            dataSource: mainDataSource,
            columns: ["id", "name", "phone"],
            scrollable: true,
            editable: true,
            navigatable: true,
            height: 200
        }).data("kendoGrid");

        var selectedClass = 'k-state-selected';
        $(document).on('click', '#grid tbody tr', function (e) {
            if (e.ctrlKey || e.metaKey) {
                $(this).toggleClass(selectedClass);
            } else {
                $(this).addClass(selectedClass).siblings().removeClass(selectedClass);
            }
        });

        mainGrid.table.kendoDraggable({
            filter: "tbody tr",
            group: "gridGroup",
            axis: "y",
            hint: function (item) {
                var helper = $('<div class="k-grid k-widget drag-helper"/>');
                if (!item.hasClass(selectedClass)) {
                    item.addClass(selectedClass).siblings().removeClass(selectedClass);
                }
                var elements = item.parent().children('.' + selectedClass).clone();
                item.data('multidrag', elements).siblings('.' + selectedClass).remove();
                return helper.append(elements);
            }
        });

        mainGrid.table.kendoDropTarget({
            group: "gridGroup",
            drop: function (e) {

                var draggedRows = e.draggable.hint.find("tr");
                e.draggable.hint.hide();
                var dropLocation = $(document.elementFromPoint(e.clientX, e.clientY)),
            dropGridRecord = mainDataSource.getByUid(dropLocation.parent().attr("data-uid"))
                if (dropLocation.is("th")) {
                    return;
                }

                var beginningRangePosition = mainDataSource.indexOf(dropGridRecord), //beginning of the range of dropped row(s)
            rangeLimit = mainDataSource.indexOf(mainDataSource.getByUid(draggedRows.first().attr("data-uid"))); //start of the range of where the rows were dragged from


                //if dragging up, get the end of the range instead of the start
                if (rangeLimit > beginningRangePosition) {
                    draggedRows.reverse(); //reverse the records so that as they are being placed, they come out in the correct order
                }

                //assign new spot in the main grid to each dragged row
                draggedRows.each(function () {
                    var thisUid = $(this).attr("data-uid"),
                itemToMove = mainDataSource.getByUid(thisUid);
                    mainDataSource.remove(itemToMove);
                    mainDataSource.insert(beginningRangePosition, itemToMove);
                });


                //set the main grid moved rows to be dirty
                draggedRows.each(function () {
                    var thisUid = $(this).attr("data-uid");
                    mainDataSource.getByUid(thisUid).set("dirty", true);
                });

                //remark things as visibly dirty
                var dirtyItems = $.grep(mainDataSource.view(), function (e) {
                    return e.dirty === true;
                });
                for (var a = 0; a < dirtyItems.length; a++) {
                    var thisItem = dirtyItems[a];
                    mainGrid.tbody.find("tr[data-uid='" + thisItem.get("uid") + "']").find("td:eq(0)").addClass("k-dirty-cell");
                    mainGrid.tbody.find("tr[data-uid='" + thisItem.get("uid") + "']").find("td:eq(0)").prepend('<span class="k-dirty"></span>')
                };
            }
        });

    });

</script>

$（文档）.ready（函数（）{
$.fn.reverse=[].reverse；//从Array.reverse保存新函数
风险值数据=[{
id:1，
姓名：“迈克尔”，
电话：“897-894-8956”
}, {
id:2，
姓名：“乔治·迈克尔”，
电话：“897-555-5555”
}, {
id:3，
姓名：“老乔治”，
电话：“897-444-4444”
}, {
id:4，
名称：“Gob”，
电话：“897-333-3333”
}, {
id:5，
姓名：“露西尔”，
电话：“897-222-2222”
}, {
id:6，
姓名：“托比亚斯”，
电话：“897-111-1111”
}, {
id:7，
姓名：“Maeby”，
电话：“897-666-6666”
}, {
id:8，
名字：“巴斯特”，
电话：“897-777-7777”
}, {
id:9，
姓名：“林赛”，
电话：“897-888-8888”
}];
var dataModel=kendo.data.Model.define({
id:“id”，
字段：{
身份证：{
键入：“数字”，
可编辑：false
},
姓名：{
键入：“字符串”，
可编辑：真
},
电话：{
键入：“字符串”，
可编辑：false
}
}
});
var maindasource=new kendo.data.DataSource({
模式：{
模型：数据模型
},
数据：数据
});
var mainGrid=$（“#grid”）.kendoGrid({
数据源：主数据源，
列：[“id”、“姓名”、“电话”]，
可滚动：对，
是的，
可导航：是的，
身高：200
}).数据（“kendoGrid”）；
var-selectedClass='k-state-selected'；
$（文档）.on（'click'，#grid tbody tr'，函数（e）{
if（e.ctrlKey | | e.metaKey）{
$（此）.toggleClass（selectedClass）；
}否则{
$（this）.addClass（selectedClass）.sides（）.removeClass（selectedClass）；
}
});
mainGrid.table.kendoDraggable({
过滤器：“tbody tr”，
组：“网格组”，
轴：“y”，
提示：功能（项目）{
var helper=$（''）；
如果（！item.hasClass（selectedClass））{
item.addClass（selectedClass）.sides（）.removeClass（selectedClass）；
}
var elements=item.parent（）.children（'.'+selectedClass.clone（）；
item.data（'multidrag'，elements.）.sides（'.'+selectedClass.remove（）；
返回helper.append（元素）；
}
});
mainGrid.table.kendoDropTarget({
组：“网格组”，
删除：功能（e）{
var draggedRows=e.draggable.hint.find（“tr”）；
e、 draggable.hint.hide（）；
var dropLocation=$（document.elementFromPoint（e.clientX，e.clientY）），
dropGridRecord=mainDataSource.getByUid（dropLocat
    // remember scroll position before you start modifying the data source
    var gridContentDiv = $("#grid").find(".k-grid-content").first();
    var scrollTop =  gridContentDiv.scrollTop();

    // ...

    // restore scroll position when your modifications are done ...
    gridContentDiv.scrollTop(scrollTop);