javascript – 更改div后,Droppable不会触发

2023年12月18日 160次阅读

我试图通过jQuery模拟一个动画效果,它包含拖放作为要触发的事件.我使用的代码似乎没问题,直到我必须通过将显示设置为none / block来交换div.每当我换到第一个div时它就会完美地执行动画,但是当它进入第二个div时(交换后)它不会触发droppable事件.我选择让各个div的id选择器实例化droppable事件的容器,从而进行动画处理.到目前为止,在搜索了大量结果后,我陷入困境并且没有任何解决方案.先感谢您.这是我的JS小提琴,我准备轻松理解我的问题.

<html>

<head>
<style>
    #wrapper    {
                        border: 1px solid gray;
                        height:300px;
                        margin: 0 auto;
                        padding: 20px 20px 20px 20px;                   
                        position:relative;
                        text-align:center;                  
                        width:600px;                                
                }
    p {
                        display:inline;
                        font-family:Calibri; 
                        font-size:20px;
                        color: #0b1207;
                        text-shadow: #63c9b8 0px 10px 10px;
    }

    #div1, #div2 {
                        border: 1px dotted green;
                        bottom:0;
                        margin-left:100px;
                        position: absolute;
                        }

    #div1 {
                        background-color: orange;                    
                        height:200px;                    
                        width:300px;
    }

    #div2 {
                        background-color: green;
                        display:none;
                        height:100px;
                        width:300px;                    
    }

    #btnchange {
                        background-color:black;
                        border-radius:10px;
                        color: #fff;
                        height:35px;
                        margin-top:10px;
                        margin-left:100px;
                        position:absolute;
                        width:80px;
    }

    .example {
                        border: 1px solid red;  
                        background-color: blue;
                        height:75px;
                        margin: 5px auto 0 ;
                        width:75px;                 
                    }

</style>

</head>

<body>

<div id='wrapper'>
    <p></p>
    <div id='div1'></div>
    <div id='div2'></div>
</div>

<button id ='btnchange' type='button'>Change</button>

<div class='example'></div>

        <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
        <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
        <script src="http://biostall.com/wp-content/uploads/2010/07/jquery-swapsies.js"></script>
        <script type="text/javascript">


                var id = 1;
                var parent = document.getElementById('wrapper');
                var makina = parent.children[id].id;

                $(function(){

                    $( "#draggable" ).draggable({
                              connectToSortable: "#sortable",
                              helper: "clone",
                              revert: "invalid"
                    });

                    $('.example').draggable({
                              containtment: "#" + makina, 
                              cursor: "pointer", 
                              revert: true
                    });

                    $('#btnchange').click(function(){
                        if (id == 1)
                        {
                            document.getElementById(makina).style.display = 'none'; 
                            id = 2;
                            makina = parent.children[id].id;
                            document.getElementById(makina).style.display = 'block';  
                            document.getElementById('wrapper').children[0].innerText = makina;
                        }
                        else
                        {
                            document.getElementById(makina).style.display = 'none'; 
                            id = 1;
                            makina = parent.children[id].id;
                            document.getElementById(makina).style.display = 'block';     
                            document.getElementById('wrapper').children[0].innerText = makina;
                        } 
                        console.log(makina);       
                    });

                    $("#" + makina).droppable({
                            drop: function(){
                                doAnimate(makina);}
                    }); 

                });

                 function doAnimate(container)
                {
                    $('#'+ container).animate({height: '+=10px'}, 500, function(){
                                    var message = container.clientHeight;
                                    $(this).html(message);
                    });
                }

        </script>

</body>

</html>

http://jsfiddle.net/xoxxbr4t/6/

最佳答案 你的问题是你只在一个项目上调用了一次droppable.一旦.droppable()函数也放在更改按钮单击内,它应该工作.

把这个内部改变功能：

$("#" + makina).droppable({
    drop: function () {
        doAnimate(makina);
    }
});

例：

http://jsfiddle.net/xoxxbr4t/7/

点赞