Javascript Jquery draggable的行为就像div低于显示的值一样

我在jQueryUI上遇到了一些问题-我有一堆可拖动的

元素，它们从一个div（dock）开始，然后移到它旁边的另一个div（expand）中。然而，他们将第二个div视为比看上去低60像素。下面显示了一些代码。基本上，这些draggables包含在expand div中，但它们与顶部的距离不会超过60像素。当它们被带到底部时，它们将在底部突出60像素。我不明白为什么会这样，有什么想法吗？他们在船坞里很好，其他的行为都很好

编辑：链接到JSFIDLE:

HTML

CSS

你能提供一个JSFIDLE吗？把它放在主要问题中。奇怪的是，它似乎在那里工作。我用的是IE11，我可以把拖拽的权利在顶部。展开。你在用什么浏览器？Chrome。它可以在独立页面上正常工作。我想问题一定出在我使用的聚合物支架上。我换了另一个脚手架，问题就解决了。
<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>

$('.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";
    }
});

 #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;
}