移動浮動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時，他們移動

回答

相關問題