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

on t2 and t3

jsFiddle

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

从OPs评论更新

标记

对于每个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");
        }
    });
});

New JSFiddle

jQuery拖放扩展

1 个答案:

从OPs评论更新

标记

的JavaScript