tyroOfJava
2010-06-01 12:32
浏览 261

jQuery的droppable的hoverClass的回调函数参数的问题

导入
[code="java"]

[/code]
然后有如下代码
[code="java"]
$('elementId').droppable({
accept: ".file, .folder",
hoverClass: function(e, ui) {
alert(typeof(ui));
alert(ui.helper);
}
}
[/code]
这里alert(typeof(ui))出的type居然是string。alert(ui.helper)居然是undefined。
按照jQuery UI的文档[code="java"]All callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'):

* ui.draggable - current draggable element, a jQuery object.
* ui.helper - current draggable helper, a jQuery object
* ui.position - current position of the draggable helper { top: , left: }
* ui.offset - current absolute position of the draggable helper { top: , left: }

[/code]
不应该这样吧。或者还是我用的不对?
怎样才能向hoverClass的回调函数传递自己需要的参数呢?

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

6条回答 默认 最新

  • myali88 2010-06-02 10:11
    已采纳

    [quote]
    [code="javascript"]
    $('#block').arrt("cond", tree);// 这样添加?好像不行啊
    [/code]
    [/quote]
    你写错了,是“attr”。另外,直接绑定对象到DOM节点上设置属性只能字符串值。你可以把你的TreeClass分解成多个字符串值属性,绑定到节点上。

    已采纳该答案
    打赏 评论
  • myali88 2010-06-01 13:28

    [quote]
    hoverClass

    Type:
    String
    Default:
    false

    If specified, the class will be added to the droppable while an acceptable draggable is being hovered.
    [/quote]
    文档里只说hoverClass是个String,没说过它是个回调函数啊!

    打赏 评论
  • myali88 2010-06-01 14:53

    [code="html"]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">



    Untitled


    <br> $(function(){<br> $(&quot;.file&quot;).draggable();</p> <pre><code> $(&#39;#block&#39;).droppable({ accept: &quot;.file, .folder&quot;, hoverClass: &quot;hover&quot; }); }); &lt;/script&gt; &lt;style type=&quot;text/css&quot;&gt; .hover{ background:#99abc3; } &lt;/style&gt; </code></pre> <p></head></p> <p><body><br> <div id="block" style="border:1px solid #ab4;height:300px;"><br> Hello World!<br> </div><br> <div class="file" style="border:1px solid red;width:300px;"><br> <p>Drag me to my target</p><br> </div><br> </body><br> </html><br> [/code]<br> 是这样的,我写的例子。</p>
    打赏 评论
  • myali88 2010-06-01 17:20

    [quote]
    All callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'):

    * ui.draggable - current draggable element, a jQuery object.
    * ui.helper - current draggable helper, a jQuery object
    * ui.position - current position of the draggable helper { top: , left: }
    * ui.offset - current absolute position of the draggable helper { top: , left: }
    

    [/quote]
    它说的回调方法指的是Event的回调。
    对于hoverClass,这个只是options里的一个设置选项,默认是false,并不是一个回调函数:
    [code="javascript"]
    _over: function(event) {

        var draggable = $.ui.ddmanager.current;
        if (!draggable || (draggable.currentItem || draggable.element)[0] == this.element[0]) return; // Bail if draggable and droppable are same element
    
        if (this.accept.call(this.element[0],(draggable.currentItem || draggable.element))) {
            if(this.options.hoverClass) this.element.addClass(this.options.hoverClass);
            this._trigger('over', event, this.ui(draggable));
        }
    
    }
    

    [/code]
    这是droppable里的源代码,看实现知道,它是通过addClss来实现的,而addClass接受的参数可以是string或function:
    [code="javascript"]
    addClass: function( value ) {
    if ( jQuery.isFunction(value) ) {
    return this.each(function(i) {
    var self = jQuery(this);
    self.addClass( value.call(this, i, self.attr("class")) );
    });
    }

        if ( value && typeof value === "string" ) {
            var classNames = (value || "").split( rspace );
    
            for ( var i = 0, l = this.length; i < l; i++ ) {
                var elem = this[i];
    
                if ( elem.nodeType === 1 ) {
                    if ( !elem.className ) {
                        elem.className = value;
    
                    } else {
                        var className = " " + elem.className + " ", setClass = elem.className;
                        for ( var c = 0, cl = classNames.length; c < cl; c++ ) {
                            if ( className.indexOf( " " + classNames[c] + " " ) < 0 ) {
                                setClass += " " + classNames[c];
                            }
                        }
                        elem.className = jQuery.trim( setClass );
                    }
                }
            }
        }
    
        return this;
    }
    

    [/code]
    所以下面的写法效果和我之前的一样:
    [code="javascript"]
    $('#block').droppable({
    accept: ".file, .folder",
    hoverClass: function() {
    return "hover";
    }
    });
    [/code]

    打赏 评论
  • myali88 2010-06-01 17:23

    如果你要通过条件来显示hover的class,可以条件以属性的形式设到要droppable的对象上,然后在用hoverClass时,设为函数,这样获取外部条件值:
    [code="javascript"]
    $('#block').droppable({
    accept: ".file, .folder",
    hoverClass: function() {

        return "hover";
    }
    

    });

    [/code]

    打赏 评论
  • myali88 2010-06-01 17:27

    抱歉,前面没写完,重写:
    [code="javascript"]
    $('#block').droppable({
    accept: ".file, .folder",
    hoverClass: function(){
    var condition = $(this).attr("cond");
    return condition ? "hover" : "another-hover";
    }
    });
    [/code]
    这里“cond”就是设定到对象上的条件值。

    打赏 评论

相关推荐 更多相似问题