Анимировать плавающие div, когда они перемещены - PullRequest
Новая
       8

Анимировать плавающие div, когда они перемещены

2 голосов
/ 18 января 2010

У меня есть два столбца, один слева представляет собой сетку из квадратных, плавающих, jQuery перетаскиваемых элементов. Столбец справа - это цель отбрасывания jQuery. Поэтому, когда я бросаю букву-каплю на цель, она добавляется к правому столбцу и скрывается слева, заставляя сетку двигаться, чтобы заполнить пространство, в котором она находилась.

Есть ли способ, которым я могу оживить это, используя jQuery вместо мгновенного движения?

Хорошо, я добавил код. Что я пытаюсь сказать, так это то, что если вы перетащите зеленый цвет, то те, что в левом столбце, переместятся, чтобы заполнить пустое пространство. Мне интересно, можно ли анимировать движение, которое они делают сами (после того, как он уходит). Извините, если я запутался, не знаю, как это объяснить.

Спасибо

Последний удар, если у кого-то есть идеи. 

<script type="text/javascript" src="jquery.min.js"></script>
<script src="jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>

<style>

.leftColumn{ width: 300px; height: 500px; outline: 2px solid blue; margin: 50px; float: left;}
.rightColumn{ width: 300px; height: 500px; outline: 2px solid green; margin: 50px; float: left;}
.gridElement{ width: 70px; height: 70px; outline: 2px solid purple; margin: 10px; float: left;}

</style>

<div class="leftColumn">
    <div style="background-color: red;" class="gridElement"></div>
    <div style="background-color: orange;" class="gridElement"></div>
    <div style="background-color: yellow;" class="gridElement"></div>
    <div style="background-color: green;" class="gridElement"></div>
    <div style="background-color: blue;" class="gridElement"></div>
    <div style="background-color: purple;" class="gridElement"></div>
    <div style="background-color: gray;" class="gridElement"></div>
    <div style="background-color: fuchsia;" class="gridElement"></div>
</div>

<div class="rightColumn"></div>

<script type="text/javascript">

    $(document).ready(function() {

        $(".gridElement").draggable({revert: "invalid", containment: "window", helper: "clone", appendTo: "body"});
        $(".rightColumn").droppable({drop: function(event, ui) {
            $(".rightColumn").append(ui.draggable);
            ui.draggable.hide();
            $(".rightColumn .gridElement").show();
        }});
    });

</script>

Ответы [ 2 ]

2 голосов
/ 20 февраля 2012

Я не использовал это в этом конкретном контексте, но похоже, что плагин Quicksand мог бы добиться цели:

плагин jQuery Quicksand

2 голосов
/ 19 января 2010

Не знаю, хотите ли вы этого, но я попытался:) 

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script src="jquery-ui-1.7.2.custom.js" type="text/javascript"></script>
<style>
    div.divDrag{width:150px;clear:both;border:1px blue dotted;
              background-color:#eeeeff;margin-bottom:2px;}
    div.divDrag span.spanHandle{background-color:#ffeeee;color:#ff0000;
                    display:block;}
</style>

<div id="divSource" style="border:1px dashed green;width:200px;
            text-align:center;float:left;">
<div class="divDrag"><span class="spanHandle">Drag</span>
    <p>hello world<br/>hello world<br/>hello world<br/></p></div>
<div class="divDrag"><span class="spanHandle">Drag</span>
    <p>hello world<br/>hello world<br/>hello world<br/></p></div>
<div class="divDrag"><span class="spanHandle">Drag</span>
    <p>hello world<br/>hello world<br/>hello world<br/></p></div>
</div>
<div id="divDest" style="border:1px dashed red;width:200px;height:600px;
       position:absolute;left:400px;top:10px">
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $(".divDrag").draggable({handle:'span.spanHandle',revert:'invalid',
            revertDuration:1000,                   
            start:function(event,ui){$(this).find('p').css("display","none");},
            stop:function(event,ui){
                $(this).animate({width:'150px'},500);
                $(this).find("p").css("display","block");
                $("#divDest").effect('highlight',500);}});
        $("#divDest").droppable({accept:'.divDrag'});
    });
</script>
...