移动浮动div时，他们移动

我有两列，左边的一个是正方形，浮动，jQuery可拖动元素的网格。右侧的列是一个jQuery放置目标。所以当我在目标上投下一滴可疑物品时，它会被追加到右栏并隐藏在左侧，导致网格移动以填充刚才那个空间。移动浮动div时，他们移动

有没有一种方法可以使用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>

来源

2010-01-18 Kyprus

你能告诉我们一些html吗？ – TheVillageIdiot 2010-01-18 20:13:32

不知道这是否是你想要的，但我没有做一个尝试:)

<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>

来源

2010-01-18 21:03:03 TheVillageIdiot

是的不完全是我的意思，但无论如何感谢，我知道我不是很清楚。如果您想再试一次，我添加了一些代码。 :) – Kyprus 2010-01-19 02:36:42

我没有在这个确切的上下文中使用这一点，但现在看来，流沙插件可能会诀窍：

jQuery Quicksand plugin

来源

2012-02-20 14:01:45

移动浮动div时，他们移动

回答

相关问题