Question

好的，伙计们，我不知道这里发生了什么。我正在使用这个插件（http://draggabilly.desandro.com/）并制作一个拖动和放大器丢弃网格（或类似的东西）。这是笔（http://codepen.io/anon/pen/QbKjzx），这里是代码：

// external js：draggabilly.pkgd.js

$(document).ready( function() {


    for(var i=1;i<=12;i++) {
        $(".inventory").append('<div class="item"></div>');
    }

    for (var i = 0; $('.item').length + 1 > i; i++){
        var n = i.toString();
        var $item = $('.item:nth-child(' + i + ')');
        $item.text(n);
        var offsetX = $item.css("left");
        var offsetY = $item.css("top");

        $item.addClass(n);
        $item.draggabilly();
        $item.css("background-color","green");


        $("." + n).on("dragStart",function(){
            $(this).css({"transition": "none", "z-index": "9999", "background-color": "red"})
            .mousemove(function(e){
                $(this).on("dragEnd",function(){
                    $(this).css("top",offsetY);
                    $(this).css("left",offsetX);

                    var posX = e.pageX;
                    var posY = e.pageY;
                    var thisItsTheVariable = $("p").height();

                    $(this).css({"transition": "all .3s", "z-index": "1"});
                })              
            })
        })
    }    
})

这个奇怪的东西来自于它的变量。当您为变量分配任何其他值时，在您放下潜水时会有一个动画，并且会返回到原始位置。即使使用$（“p”）。css（“background-color”）或类似作品。但是当你使用.css（“top”）,. css（“left”）,. css（“height”）,. css（“width”）,. high（），。width（）和其他（i）时没试过这一切），动画消失了！这里发生了什么？

Answer 1

启动动画后调用$("p").height()似乎可以解决问题。

// external js: draggabilly.pkgd.js

$(document).ready(function () {


    for (var i = 1; i <= 12; i++) {
        $(".inventory").append('<div class="item"></div>');
    }

    for (var i = 0; $('.item').length + 1 > i; i++) {
        var n = i.toString();
        var $item = $('.item:nth-child(' + i + ')');
        $item.text(n);
        var offsetX = $item.css("left");
        var offsetY = $item.css("top");

        $item.addClass(n);
        $item.draggabilly();
        $item.css("background-color", "green");


        $("." + n).on("dragStart", function () {
            $(this).css({
                "transition": "none",
                "z-index": "9999",
                "background-color": "red"
            })
                .mousemove(function (e) {
                $(this).on("dragEnd", function () {
                    $(this).css("top", offsetY);
                    $(this).css("left", offsetX);

                    var posX = e.pageX;
                    var posY = e.pageY;
                     

                    $(this).css({"transition": "all .3s", "z-index": "1"});
                    var thisItsTheVariable = $("p").height();
                })
            })
        })
    }
})

body, html {
    height: 100%;
    width: 100%;
    padding: 0;
    border: 0;
}
.inventory {
    height: 300px;
    width: 400px;
    border: 1px black solid;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.item {
    width: 100px;
    height: 100px;
    background: #F90;
    box-sizing: border-box;
    border: 1px black solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/draggabilly/1.2.0/draggabilly.pkgd.js"></script>
<div class="inventory"></div>
<p></p>

Draggabilly jQuery插件中的奇怪变量行为

1 个答案: