Question

我调整了我从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;
}

Answer 1

要获取被拖动的元素，可以使用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" );
        }
    });
});
});

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

动画bug：两个div同时开始

1 个答案: