Question

我试图通过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/

Answer 1

你的问题是你只在一个项目上调用了一次droppable。一旦.droppable（）函数也被放入更改按钮单击，它应该可以工作。

将此内部更改功能：

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

示例：

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

Answer 2

您不能将droppable绑定到第二个元素。你可以调用一次这个函数：

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

因为你的＆＃34; makina＆＃34;在这一点上是div1，这是唯一受到约束的东西。我做了它自己的功能：

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

然后在你的设置中为两个div调用它：

setDroppable('div1');
setDroppable('div2');

现在它工作正常。这是更新的fiddle

Answer 3

感谢Michal确实是答案，但我认为一个优秀的程序员会减少多余的代码片段，因为我可以告诉他们这些是来自$（document）.ready（）函数的重复行。然而，这是一个解决方案。在我阅读你的帖子后，我决定自己发布答案：

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

//Current
$("#wrapper").droppable({
    drop: function () {
        doAnimate(makina);
    }
});

因为我正在使用嵌套的div，所以我意识到我可以使父div可以放置并且只为活动的子动画（显示）。

更改div后，Droppable不会触发

3 个答案: