使用jQuery Collision时出错

时间:2012-09-10 18:21:54

标签: jquery jquery-ui jquery-plugins collision-detection collision

我还在学习jQuery,并且在eruciform's jquery-collision plugindocumentation)度过了最艰难的时光。

我需要的是获取div的名称,我的draggables在mouseup上重叠,但它似乎只想将函数本身的代码作为文本返回。

这里是jsFiddle。我做错了什么?

标记:

<div id="mainDiv" class="mainDiv">
    <div class="topNav" id="topNav">
        <div class="dragElements">
            <div class="draggable" id="drag01">One</div>
            <div class="draggable" id="drag02">Two</div>
            <div class="draggable" id="drag03">Three</div>
            <div class="draggable" id="drag04">Four</div>
        </div>
        <div class="dropElements">
            <div class="venn" id="venn1">
                <p/>&nbsp;<p/>Blue:
            </div>
            <div class="venn" id="venn2">
            <p/>&nbsp;<p/>Orange:
            </div>
        </div>
    </div>
</div>

样式:

.dragElements{
    width: 100%;
    height: 170px;
}
.dropElements{
    width: 100%;
    height: 275px;
}
#venn1{
    width:275px;
    height:275px;
    background-color:#0066FF;
    position:absolute;
    float:left;
    left: 0px;
    text-align: center;
}
#venn2{
    width:275px;
    height:275px;
    background-color:#FC0;
    position:absolute;
    float:right;
    right: 0px;
    text-align: center;
}
.draggable{
    text-align: center;
    width: 100px;
    padding: 10px;
    background-color:#66CCFF;
    cursor:pointer;  
    z-index:100;    
}

脚本:

$(document).ready(function() {
    $("div.draggable").draggable();
    $("div.draggable").mousedown(function() {
        dragID = this.id
    });
    $("div.draggable").mouseup(function() {
        var colliders_selector = ".draggable";
        var obstacles_selector = ".venn";
        var hits = $(colliders_selector).collision(obstacles_selector, {
            mode: "collision"
        });
        alert(hits.text);
    });
});

1 个答案:

答案 0 :(得分:1)

因为您没有调用该函数。

alert(hits.text);更改为alert(hits.text());