jquery - jQuery拖放扩展

Question

我想要做的是将立方体拖到盒子上。盒子展开，立方体可以放置在 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 在时间线扩展时可放置！

Answer 1

利用：

overflow:hidden

在 t2 和 t3

jsFiddle

另外，我将它们转换为 aclass而不是id. 在现实世界中拥有多个 ID 是非法的，在 HTML 中也应该是非法的。

来自 OP 评论的更新

标记

我为每个t#班级添加了一个drop班级

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

JavaScript

$(function () {
    $(".drag").draggable({
        revert: "invalid",
        snap: '.t3, .t2, .t1',
        snapMode: 'inner'
    });
    $(".drop").droppable({ // Just assign the event to the drop class now
        over: function (event, ui) {
            $(this).parent().css('height', "66px");
        },
        out: function (event, ui) {
            $(this).parent().css('height', "24px");
        },
        drop: function (event, ui) {
            $(this).parent().css('height', "24px");
        }
    });
});

新的 JSFiddle