0

私がやりたいことは、立方体をボックスの上にドラッグすることです。ボックスが拡大し、キューブを 3 つの「タイムライン」のいずれかに配置できます。

私のhtml：

<div class="drag"></div>
<div class="AddRoom One">
    <div class="timeLine">
        <div id="t1"></div>
        <div id="t2"></div>
        <div id="t3"></div>
    </div>
</div>
<div class="AddRoom Two">
    <div class="timeLine">
        <div id="t1"></div>
        <div id="t2"></div>
        <div id="t3"></div>
    </div>
</div>

私のJavaScript：

$(function () {
    $(".drag").draggable({
        revert: "invalid",
        snap: '#t3, #t2, #t1',
        snapMode: 'inner'
    });
    $(".timeLine").droppable({
        over: function (event, ui) {
            $(this).css('height', "66px");
            $(".timeLine #t1").droppable({});
            $(".timeLine #t2").droppable({});
            $(".timeLine #t3").droppable({});
        },
        out: function (event, ui) {
            $(this).css('height', "24px");
        },
        drop: function (event, ui) {
            $(this).css('height', "24px");
        }
    });
});

Jsfiddle: http://jsfiddle.net/H7XV9/

ご覧のとおり、t1、t2、t3 にドロップすることは可能ですが、タイムラインが展開されたときに t2 と t3 のみをドロップ可能にしたいのです!

4

1 に答える 1