章魚發全紀錄

這是我在開發產品時所遇到的問題，只想記錄一下，說不定過沒多久jquery會把它給改掉。

 

情境 : 有個拖拉的區塊，要拉到類似tree的地方請它展開，並drop。

程式碼:

<div class="fades father">+爹</div>
<div class="fades son" style=" margin-left:25px;">兒子一號</div>
<div class="fades son" style=" margin-left:25px;">兒子二號</div>
<div class="fades son" style=" margin-left:25px;">兒子三號</div>
<div class="fades son" style=" margin-left:25px;">兒子四號</div>

    $(function () {
        $(".fades.son").slideUp();

        $("#fadesdrag").draggable({
            appendTo: "body",
            scroll: true,
            helper: "clone",
            revert: true
        });

        $(".fades").droppable({
            hoverClass: "ui-state-hover",
            accept: ":not(.ui-sortable-helper)",
            over: function (event, ui) {
                if ($(this).hasClass('father')) {
                    $(".fades.son").slideDown();
                }
            }
        });
    });    
</script>

    $(function () {
        $(".fades.son").slideUp();

        $("#fadesdrag").draggable({
            appendTo: "body",
            scroll: true,
            helper: "clone",
            revert: true
        });

        $(".fades").droppable({
            hoverClass: "ui-state-hover",
            accept: ":not(.ui-sortable-helper)",
            over: function (event, ui) {
                if ($(this).hasClass('father')) {
                    $(".fades.son").slideDown();
                    setTimeout( function () {
                        var dragged = $.ui.ddmanager.current;
                            $.ui.ddmanager.prepareOffsets(dragged);
                    }, 1000);
                }
            }
        });
    });    
</script>