Jquery draggable表现得好像div低于显示

Question

我在使用jquery ui时遇到了一些麻烦 - 我有一堆draggable个元素从一个div（dock）开始，然后移动到旁边的另一个元素（expand）。但是，他们将第二个div视为比低 60个像素。一些代码如下所示。基本上，这些可拖动包含在扩展div 中，但它们不会移动到距离顶部 60个像素的位置。当他们被带到底部时，他们会在底部中留下60个像素。我无法弄清楚为什么会发生这种情况，有什么想法吗？他们在码头div中服从高度，所有其他行为都很好。

编辑：链接到jsfiddle：http://jsfiddle.net/ka7f9bkb/

HTML

<div id="dropwrap">
    <div id="dock">
        <div id="dockhead">Dock here</div>
        <div class="draggable" id="drag2" style="top:120px;left:5px;">Premium Pie Chart</div>
        <div class="draggable" id="drag3" style="top:170px;left:5px;">Loss Pie Chart</div>
        <div class="draggable" id="drag4" style="top:220px;left:5px;">Premium History Chart</div>
        <div class="draggable" id="drag5" style="top:270px;left:5px;">Loss History Chart</div>
        <div class="draggable" id="drag6" style="top:320px;left:5px;">Loss Ratio History Chart</div>
    </div>
    <div id="expand"></div>
</div>

JS

$('.draggable').draggable({
    containment:'#dropwrap',
    distance: 5,
    revert: "invalid",
    scroll:true,
    snap: '#expand',
    snapMode: 'inner',
    stack: '.draggable',
    cursorAt: {left: 90, top: 70},
    refreshPositions: true,
    start: function(event, ui) {
        if (ui.helper.context.id === "drag2") {
            ui.helper.context.innerHTML = "Premium Pie Chart";
        }
        if (ui.helper.context.id === "drag3") {
            ui.helper.context.innerHTML = "Loss Pie Chart";
        }
        if (ui.helper.context.id === "drag4") {
            ui.helper.context.innerHTML = "Premium History Chart";
        }
        if (ui.helper.context.id === "drag5") {
            ui.helper.context.innerHTML = "Loss History Chart";
        }
        if (ui.helper.context.id === "drag6") {
            ui.helper.context.innerHTML = "Loss Ratio History Chart";
        }
        ui.helper.context.style.width = "175px";
        ui.helper.context.style.height = "50px";
        ui.helper.context.style['background-color'] = "#E0E0E0";
        ui.helper.context.style.cursor = "pointer";
        ui.helper.context.style['border'] = "0";
        ui.helper.context.style['border-radius'] = "25px";
        ui.helper.context.style.color = "#fff";
        ui.helper.context.style['box-shadow'] = "";
    },
});
$('#dock').droppable({
    drop: function(event, ui) {
        if (ui.helper.context.id === "drag2") {
            ui.helper.context.innerHTML = "Premium Pie Chart";
            ui.helper.context.style.top = "120px";
        }
        if (ui.helper.context.id === "drag3") {
            ui.helper.context.innerHTML = "Loss Pie Chart";
            ui.helper.context.style.top = "170px";
        }
        if (ui.helper.context.id === "drag4") {
            ui.helper.context.innerHTML = "Premium History Chart";
            ui.helper.context.style.top = "220px";
        }
        if (ui.helper.context.id === "drag5") {
            ui.helper.context.innerHTML = "Loss History Chart";
            ui.helper.context.style.top = "270px";
        }
        if (ui.helper.context.id === "drag6") {
            ui.helper.context.innerHTML = "Loss Ratio History Chart";
            ui.helper.context.style.top = "320px";
        }
        ui.helper.context.style.width = "175px";
        ui.helper.context.style.height = "50px";
        ui.helper.context.style.left = "5px";
        ui.helper.context.style['background-color'] = "#E0E0E0";
        ui.helper.context.style.cursor = "pointer";
        ui.helper.context.style['border'] = "0";
        ui.helper.context.style['border-radius'] = "25px";
        ui.helper.context.style.color = "#fff";
        ui.helper.context.style['box-shadow'] = "";
        ui.helper.context.style.position = "absolute";
    }
});

$('#expand').droppable({
    drop: function(event, ui) {
        console.log(ui);
        if (ui.helper.context.id === "drag2") {
            ui.helper.context.style.cursor = "auto";
            ui.helper.context.style.height = "250px";
            ui.helper.context.style.width = "350px";
            ui.helper.context.style['border-radius'] = "10px";
            ui.helper.context.style['box-shadow'] = "5px 5px 15px #000";
        }
        if (ui.helper.context.id === "drag3") {
            ui.helper.context.style.cursor = "auto";
            ui.helper.context.style.height = "250px";
            ui.helper.context.style.width = "350px";
            ui.helper.context.style['border-radius'] = "10px";
            ui.helper.context.style['box-shadow'] = "5px 5px 15px #000";
        }
        if (ui.helper.context.id === "drag4") {
            ui.helper.context.style.cursor = "auto";
            ui.helper.context.style.color = "#000";
            ui.helper.context.style.height = "300px";
            ui.helper.context.style.width = "350px";
            ui.helper.context.style['border-radius'] = "10px";
            ui.helper.context.style['box-shadow'] = "5px 5px 15px #000";
        }
        if (ui.helper.context.id === "drag5") {
            ui.helper.context.style.cursor = "auto";
            ui.helper.context.style.color = "#000";
            ui.helper.context.style.height = "300px";
            ui.helper.context.style.width = "350px";
            ui.helper.context.style['border-radius'] = "10px";
            ui.helper.context.style['box-shadow'] = "5px 5px 15px #000";
        }
        if (ui.helper.context.id === "drag6") {
            ui.helper.context.style.cursor = "auto";
            ui.helper.context.style.color = "#000";
            ui.helper.context.style.height = "300px";
            ui.helper.context.style.width = "350px";
            ui.helper.context.style['border-radius'] = "10px";
            ui.helper.context.style['box-shadow'] = "5px 5px 15px #000";
        }
        ui.helper.context.style.position = "absolute";
    }
});

CSS

 #expand {
    height:100%;
    width:84%;
    float:left;
    background: radial-gradient(#BCD1D1, #33C4C4, #288E8E);
    border: solid 2px #23BAC4;
}
#dock {
    height: 100%;
    width:15%;
    float:left;
    background-color: #F2F2F2;
    border-top: solid 2px #23BAC4;
    border-bottom: solid 2px #23BAC4;
    border-left: solid 2px #23BAC4;
}
#dockhead {
    color: #000;
    background-color: #35C4C4;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 5px;
}
#dropwrap {
    height: 800px;
    width: 100%;
    overflow: visible;
}
.draggable {
    width:175px;
    height:50px;
    color: #fff;
    display: inline-block;
    border-radius: 25px;
    background: linear-gradient(#35C4C4, #2B9E9E);
    position: absolute;
    cursor:pointer;
}