javascript - 获取可拖动剑道窗口的偏移量

标签 javascript jquery kendo-ui

我怎样才能得到offset();我的剑道窗口被拖动时的...例如,在 jQuery UI 中,以下代码有效:

$('#easterEgg').draggable(
    {
        drag: function(){
            var offset = $(this).offset();
            var xPos = offset.left;
            var yPos = offset.top;


            $('#posX').text('x: ' + xPos);
            $('#posY').text('y: ' + yPos);
        }
    });

jsfiddle demo

但是当我尝试将相同的内容与 kendo ui 合并时,我什么也没得到:尝试了下面的一些变体,没有错误,只是没有输出。我怎样才能用kendo ui做同样的事情?

$("#easterEgg").kendoWindow({
        draggable: true,

         drag: function(){
            var offset = $(this).offset();
            var xPos = offset.left;
            var yPos = offset.top;


            $('#posX').text('x: ' + xPos);
            $('#posY').text('y: ' + yPos);
        }
});

最佳答案

您的代码中有一些错误。

首先,没有drag事件,请检查docs 。您必须使用dragstartdragend为此。

第二个问题是 JavaScript 框架的功能各不相同。因为 jQuery UI 中的 this 是模态元素,但这并不意味着它对于所有其他框架都是相同的。在 Kendo UI 上,this 关键字在大多数情况下是小部件的实例,这比仅引用目标元素更有意义。小部件的实例有一个名为 element 的属性,它是创建小部件的目标元素。

鉴于此,您的代码应该是:

dragstart: function() { // or dragend
    let offset = $(this.element).offset();
}

Demo

关于javascript - 获取可拖动剑道窗口的偏移量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61514911/

相关文章:

javascript - 你如何更改 Angular 应用程序中的文件路径?

javascript - 如何在显示打开期间摆脱动画

javascript - 如何使用通用方法设置带参数的服务 URL

javascript - CSS :hover and active conflits - a specific case

javascript - Kendo MVC-如何在 MultiselectBox 上向数据源添加附加项目

javascript - Protractor table.filter 超时

javascript - 使用 jquery 让所有父 div 和他们自己的 child 一样高

jquery - 带有单选按钮的 Bootstrap togglabe 选项卡的 html 表单

kendo-ui - 在模板中以声明方式绑定(bind)时,不在 Kendo UI numericTextbox 中显示小数

javascript - 如果编辑中下拉值发生变化如何执行函数?