0

我调整了我从 JqueryUi 使用的这个脚本，但我遇到了问题。两个 div 同时开始。我希望每个球只有在被拖过特殊区域后才开始动画。

问题：我怎样才能让他们同时制作一个动画并在他们制作动画后打开我感兴趣的页面？每个球都有她的属性。

我正在使用的 JavaScript 代码：

$(document).ready(function(){
    $(function() {
        $("#ball").draggable({ containment: "#cadru_principal", scroll: false, revert: "invalid" });
        $("#ball2").draggable({ containment: "#cadru_principal", scroll: false, revert: "invalid" });
        $( "#dropable" ).droppable({
            drop: function( event, ui ) {
                $("#ball").animate({left: '490px', top: '300px'}, 900);
                setTimeout(function() {window.location.href = "contact.html"}, 900);
                $("#ball2").animate({left: '490px', top: '300px'}, 900);
                setTimeout(function() {window.location.href = "pictori.html"}, 900);
            $( this )
                .find( "p" )
                    .html( "Ai nimerit" );
        }
    }); 
});

});

的HTML：

<div id="ball" class="ui-widget-content"></div>
<div id="ball2" class="ui-widget-content"></div>
<div id="dropable" class="ui-widget-header">
<p>Drop me here</p>

CSS：

#ball {
position: absolute;
left: 183px;
top: 467px;
width: 42px;
height: 40px;
display: block;
background: url(../Images/ball.png) no-repeat;
background-position: top left;
z-index: 1002;
}
#ball2 {
    position: absolute;
    left: 225px;
    top: 460px;
    width: 42px;
    height: 40px;
    display: block;
    background: url(../../Web4/Images/ball2.png) no-repeat;
    background-position: top left;
    z-index: 1001;
}
4

1 回答 1

0

要获取被拖动的元素，您可以在 droppable-drop 参数中使用 ui.draggable。

JsFiddle 演示：http: //jsfiddle.net/JCNAE/

编码：

$(document).ready(function(){
    $(function() {
        $("#ball").draggable({ containment: "#cadru_principal", scroll: false, revert: "invalid" });
        $("#ball2").draggable({ containment: "#cadru_principal", scroll: false, revert: "invalid" });
        $( "#dropable" ).droppable({
            drop: function( event, ui ) {
     //           alert(ui);
                $(ui.draggable).animate({left: '490px', top: '300px'}, 900,
                                        function(){ //finish animation callback
                                            var url = $(this).attr("data-url");
                                            $("#url").text(url); //navigate here, used a div for testing purposes
                                                  }
                 );              
            $( this ).find( "p" ).html( "Ai nimerit" );
        }
    });
});
});

另外作为旁注，您可以在动画完成时使用回调，而不是使用单独的超时来导航到 url，这也在上面的演示中实现。为了能够为每个 div 分配一个 url，我分配了一个 data-url 属性，该属性可以在回调中获得。

于 2012-06-26T09:46:12.513 回答