0

JqueryUiから使用したこのスクリプトを微調整しましたが、問題があります。両方のdivが同時に開始します。特別ゾーンにドラッグした後でのみ、各ボールのアニメーションを開始したいと思います。

質問：アニメーションを作成した後、一度に1つずつアニメーション化して、興味のあるページを開くにはどうすればよいですか？彼女の特性を持つ各ボール。

私が使用している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 に答える