1

こんにちは、css - jquery ドラッグ アンド ドロップ -issue のヘルプをお願いしたいと思います。私は、div をコンテナーの下部に配置することに慣れています (位置: 相対 -> 位置: 絶対; 下: 0;)。

目標: ストレージ div から項目をドラッグして別の div にドロップし、それらの項目を下から上に垂直に配置したいと思います。タワー（2D）か何かを構築するようなものです。これらのアイテムを新しいコンテナの底と互いの上に浮かせるにはどうすればよいですか?

ありがとう - ジャニ

#drop {
    height:300px;
    background:#EDCCE9;
}
#drag {
    margin-top:10px;
    height:50px;
    background:#B8D8E3;
}
#drag img {
    display: inline-block;
    margin-right:10px;
}
.temp {
    display: block;
}

$('.item').draggable({
    containment: 'document',
    revert: true,
    helper: 'clone',
    start: function () {
        contents = $(this).html();
        currentValue = $(this).attr('value');
    }
});
$('#drop').droppable({
    hoverClass: 'border',
    accept: '.item',
    drop: function (event, ui) {
        $(this).append($(ui.draggable).clone());
        $('#drop .item').addClass('temp');
        $('.temp').removeClass('ui.draggable item');
        $(".temp").draggable({
            containment: 'document',
            revert: true
        });
    }
});
$('#drag').droppable({
    hoverClass: 'border',
    accept: '.temp',
    drop: function (event, ui) {
        $(ui.draggable).remove();
    }
});

<div id="drop"></div>
<div id="drag">
    <img src="blocks/a.png" width="50px" height="50px" class="item" />
    <img src="blocks/b.png" width="50px" height="50px" class="item" />
    <img src="blocks/c.png" width="50px" height="50px" class="item" />
    <img src="blocks/d.png" width="50px" height="50px" class="item" />
    <img src="blocks/e.png" width="50px" height="50px" class="item" />
    <img src="blocks/f.png" width="50px" height="50px" class="item" />
</div>
4

1 に答える 1

0

残念ながら、「float:bottom;」はありません。このためのタイプ構造。position:absolute; を使用する必要があります。あなたが説明したように。

必要に応じてこれを行うには、jQuery に依存して正しいbottom値を適用することができます (コンテナ内に既にあるアイテムの数を測定し、この値を各アイテムの高さで割って、それらがすべて同じであれば、これを行うことができます)。サイズは例のとおりです。）

スタック内のアイテムをカウントするには、.length() read here for moreを使用できます

また

:nth-child セレクターを使用して、CSS だけでこれを行うことができます。これに関する問題は、すべてのブラウザーで完全にサポートされているわけではないことです (つまり、IE8 以下を意味します) 詳細については、 can i use itを参照してください。

この方法では、次のように、指定されbottomた値を増加させてリストを作成するだけです。

li:nth-child(1) {
    bottom:0;
}
li:nth-child(2) {
    bottom:50px;
}    
li:nth-child(3) {
    bottom:100px;
}
...

この広告の吐き気。問題は、説明する必要があるアイテムの数がわかっている場合であり、また、説明するアイテムが多数ある場合は大量の CSS を追加する必要があるということです。

それらがすべて同じサイズでない場合は、jQuery メソッドを使用する必要があります。スタック内に既にある項目の数を単純にカウントする代わりに、それらの高さを取得し、それを使用して適切なbottom値を計算する必要があります。

于 2013-07-22T12:54:22.963 に答える