jquery - 如何在另一个元素jquery的中心为可拖动元素设置动画

Question

我想将一个可拖动的 div 动画化到另一个 div 的中心。我怎样才能做到这一点？事实上，我想将 div.drag 拖到 div.fix 的边缘，然后将元素拖到 div.fix 的中心。谢谢你的帮助

            $(document).ready(function() {
                var widthFix = $(".fix").width() / 2;
                var HeightFix = $(".fix").height() / 2;
                var widthDrag = $(".drag").width() / 2;
                var HeightDrag = $(".drag").height() / 2;
                console.log(`x:${widthFix} y:${HeightFix}`);
    
                var distanceTop = $(".fix").offset().top;
                var distanceLeft = $(".fix").offset().left;
                console.log(distanceTop + " " + distanceLeft);
                $(".drag").mousedown(function() {
                    $(window).on("mousemove", function(e) {
                        var x = e.pageX;
                        var y = e.pageY;
                        $(".drag").css({
                            top: y,
                            left: x,
                            transform: "translate(-50%,-50%)"
                        });
    
                        if (x >= distanceLeft && y >= distanceTop) {
                            // alert("you loose");
    
                            $(".drag").animate({
    
                                left: HeightFix - HeightDrag,
                                top: widthFix - widthDrag,
    
                            }, 1000, "linear", function() {});
    
                        }
                    });

                $(".drag").mouseup(function() {


                    $(window).off("mousemove")

                });


            });

        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <div class="drag"></div>
        <div class="fix"></div>

Answer 1

您可以使用 JQuery UI draggable和 droppable并在 drop 事件上写下你的任务。

$('#drag').draggable();
$('#fix').droppable({
accept:'#drag',
drop:function(event,ui){
//now get the draggable element using ui object and set the style you want.
}
});