2

2 つの列があります。左側の列は、正方形のフローティング jQuery ドラッグ可能要素のグリッドです。右側の列は jQuery のドロップ ターゲットです。そのため、ターゲットに dropabble をドロップすると、それは右側の列に追加され、左側に隠され、グリッドが移動して、そのスペースがあったスペースを埋めます。

インスタント移動の代わりに 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>
4

2 に答える 2

2

私はこれをこの正確なコンテキストで使用していませんが、Quicksandプラグインがそのトリックを実行する可能性があるようです。

jQueryQuicksandプラグイン

于 2012-02-20T14:01:45.640 に答える
1

これがあなたが望むものかどうかはわかりませんが、私は試みました:)

<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-18T21:03:03.907 に答える