jquery - 如何在不影响钟摆运动的情况下使用 jQuery 可拖动事件拉动链条

Question

我正在开发一个网站，上面有一些动画。我正在使用jQuery animate函数来做这个。有一个抽水马桶的图像，如果有人拖/拉链条，它应该被冲掉。请参考下图

链不断移动，使用jQuery Pendulum可以正常工作。现在我所做的是，如果有人点击链条，它将如下所示： -

我正在使用的代码是：-

var rotation = 3;
            var swingtime = 1603;

            function init() {
                $('#pendulum-parent').animate({rotate: rotation}, 0, function () {
                    $('#pendulum-parent').css("display", "block");
                    rotation *= -1;
                    pendulumswing();
                });
            }

            function pendulumswing() {
                $('#pendulum-parent').animate({rotate: rotation},swingtime, "swing", function(){
                     rotation *= -1;
                     pendulumswing();
                });
            }

            init();


            $('.pull_chain').on("click",function()
            {

                $('.flush_handle').addClass('flush_handle1');
                $('#pendulum-child').addClass('pull_chain1');

            });

            setInterval(function(){$('.flush_handle').removeClass('flush_handle1')}, 6000);
            setInterval(function(){$('#pendulum-child').removeClass('pull_chain1')}, 6000);

HTML 代码：-

<div class="flush_handle"><img src="images/flush-handle.png" /></div>
    <div class="flush_chain">
        <div id="pendulum-parent">
            <div id="pendulum-child"><a class="pull_chain" href="javascript:void(0);"></a></div> <!-- Chain image -- >
        </div>
    </div>

上面的代码没有问题，它成功执行了，但是当有人拉/拖链时我想要同样的效果。我是第一次这样做，需要你的帮助。

手柄是不同的图像，链条是不同的图像。链条也像钟摆一样不停地运动。对不起我的英语不好，任何帮助将不胜感激

Answer 1

好的，我得到了解决方案，我删除了点击功能并使用以下代码：-

$('#pendulum-child').draggable(
                {  
                    start: function(event, ui) {
                        $('.flush_handle').addClass('flush_handle1');
                    },
                    axis: 'y',
                    revert: function( event, ui ) {

                        $('.flush_handle').removeClass('flush_handle1');

                        $(this).data("uiDraggable").originalPosition = {
                            top : '3px',
                            left : '-74px'
                        };

                        init()
                        return true;


                    }
                }

            );

CSS :-

#pendulum-child 
{
    width:118px;
    height:255px;
    background-image:url(images/flush-chain.png);
    background-repeat:no-repeat;
    position:absolute;
    left:-74px;
    top:3px;
}
#pendulum-parent 
{
    width:22px;
    height:22px;
}