Question

我有一个可拖动的div，当你放弃它时，它会给你左边和顶部的值，如果它包含一个特定的类。

示例：

$( "div" ).draggable({ 
    cursor:'move',
    stop: function() {

        if ($(this).hasClass('cool')) {
            var state = "Class cool exists"
        }
        var b = $(this);
        var bl = b.offset().left;
        var bt = b.offset().top;
        console.log("  Left:" + bl + "  Top:" + bt + "  Class:" + state);    


    }});

和小提琴：http://jsfiddle.net/sq4XZ/

现在这可以找到，但我想在单独的函数中调用所有这些方法，因为在我的实际脚本中，我必须多次调用该函数，点击按钮，悬停，基本上不只是你放弃了div。

所以我做的是这个：

function cool(){

        if ($(this).hasClass('cool')) {
            var state = "Class cool exists"
        }
        var b = $(this);
        var bl = b.offset().left;
        var bt = b.offset().top;
        console.log("  Left:" + bl + "  Top:" + bt + "  Class:" + state);    

}

$( "div" ).draggable({ 
    cursor:'move',
    stop: function() {

        cool();


    }});

这样每次我需要获取这些值时，我都会调用cool（）函数。

jsFiddle：http://jsfiddle.net/5bQ4d/

现在，如果你是一个javascript大师，你现在应该知道这不应该因为$（this）而起作用。如果我用$（'div'）替换$（this）就可以了。但是当我调用cool（）时，它不知道哪个是$（这个）。

在我的实际页面中，我有很多这样的div，所以当我调用cool（）时，我必须传递我正在讨论的div id / name / class。 那么，我如何将div name / id / class传递给cool（）函数，以便知道$（this）表示我点击/悬停/删除的div？

由于

Answer 1

您可以使用Function#call：

stop: function() {

    cool.call(this);


}});

这会强制this与this内cool相同，而stop内{{1}}。 http://jsfiddle.net/5bQ4d/1/

Answer 2

尝试这样的事情：

function cool(ui) {

    if (ui.hasClass('cool')) {
        var state = "Class cool exists"
    }
    var b = ui;
    var bl = b.offset().left;
    var bt = b.offset().top;
    console.log("  Left:" + bl + "  Top:" + bt + "  Class:" + state);    
}

$( "div" ).draggable({
    cursor:'move',
    stop: function(el, ui) {
        cool(ui.helper);
    }
});

小提琴：http://jsfiddle.net/caf9R/

在文档中：http://jqueryui.com/demos/draggable/

所有回调（开始，停止，拖动）都会收到两个参数：原始回调   浏览器事件和准备好的UI对象，请查看下面的文档   这个对象（如果你的第二个参数'ui'命名）：


ui.helper - 表示正在拖动的帮助程序的jQuery对象

Answer 3

你可以这样做：

function cool(element){    
    if ($(element).hasClass('cool')) {
        var state = "Class cool exists"
    }
    var b = $(element),
        bl = b.offset().left,
        bt = b.offset().top;
    console.log("  Left:" + bl + "  Top:" + bt + "  Class:" + state);   
}


$("div").draggable({ 
    cursor:'move',
    stop: function() {
        cool(this);   
}});

调用javascript函数来获取元素的偏移量

3 个答案: