5

ドラッグ可能な画像がたくさんあり、ドロップ可能なアイテムがたくさんあります。Trello で、カードの上に写真をドラッグすると、カードの右下にスナップします。

ここに画像の説明を入力

同じカードに別の人の写真をドラッグすると、最後の画像の左側にスナップします。これは、jquery UI のビルトイン API の一部であり、ドロップ可能ですか、それともこの動作を取得するためのカスタム コードですか?

これが私の現在のコードです：

 <script type="text/javascript">
    $(function () {
        $(".draggable").draggable({ revert: "invalid", snap: "true", snapMode: "inner" });
        $(".droppable").droppable({
        });
    });
</script>
4

1 に答える 1

10

これは、 を使用して同様のことを行う 1 つの方法jQuery-ui-droppableです。

HTML

<div id="test">
    <div class="draggable">1</div>
    <div class="draggable">2</div>
    <div class="draggable">3</div>
    <br>
    <br>
    <div class="droppable">
        <div class="bottom"> 
        </div>    
    </div>
</div>

CSS

.draggable {
   display:inline-block;
   border:1px solid blue;
   height: 22px;
   width: 25px;
   margin-right: 1px;
   text-align: center;
   vertical-align: center;
}
.droppable {
    position: absolute;
    border:1px solid black;
    height:100px;
    width:200px;
    display:inline-block;
    margin-left:50px;
    text-align: right;
}
.bottom {
    position: absolute;
    bottom: 0;
    height:25px;
    width:200px;
}

jQuery

$(".draggable").draggable({ revert: "invalid", snap: "true", snapMode: "inner" });
$(".droppable").droppable({
    drop: function( event, ui ) {
           ui.helper.css('top','');
           ui.helper.css('left','');
           $(this).find('.bottom').prepend(ui.helper);
        }
});

フィドルの例

別の例

複数のドロップ可能

私はあまり詳しくありませんtrelloが、不足している機能がないかどうかを確認するためにチェックアウトします。

また、私の例に欠けているものを見つけた場合はお知らせください。私はそれに対処します。

于 2013-11-28T01:55:34.860 に答える