调整浏览器窗口大小时防止拖动/拖放div移动

Question

我使用Jquery draggable / droppable 我用PHP循环了一些“DIV”：
我也使用Bootstrap作为我的框架！

echo "<div class='elementDiv' id='".$row['id']."' style='width:".$row['element_langd']."px' style='height:".$row['element_hojd']."px'>".$row['element_nr']." | ".$row['element_langd']." | ".$row['element_hojd']." | ".$row['element_vikt']."t</div>";

Theese divs可以拖延：

$('.elementDiv').draggable({
   revert: 'invalid',
   grid: [ 10, 10 ],
   containment: "document",
});

当我调整浏览器窗口的大小时，div会保留在父div中。

<div class="listElements"></div>

现在我将一些div拖到另一个div：

<div class="col-lg-10 well" id="flakDiv">
    <div class="flakSideUp">
        dropZone
    </div>
</div>

现在当我调整浏览器窗口的大小时，我拖动到“flakSideUp”的div在我缩放窗口时从右向左移动。
我该如何防止这种情况发生？

CSS

[draggable] { 
-moz-user-select: none; 
-khtml-user-select: none; 
-webkit-user-select: none; 
user-select: none; /* Required to make elements draggable in old WebKit */ 
-khtml-user-drag: element; 
-webkit-user-drag: element; 
} 
.listElements{
border: 1px dashed #000;
width: 100%;
background-color: white;
}
.elementDiv {
background-color: #dddddd;
height: 35px;
margin: 2px;
cursor: move;
}
.elementDiv:hover {
background-color: #cccccc;
}

#flakDiv{
min-width: 650px;
}
.flak{
width: 600px;
height: 250px;
background-color: #ffffff;
}
.flakSideUp{
width: 600px;
height: 100px;
border: solid 1px red;
}
.flakMiddle{
width: 600px;
height: 50px;
border: solid 1px red;
background-color: red;

//Text
color: white;
text-align: center;
}
.flakSideDown{
width: 600px;
height: 100px;
border: solid 1px red;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.drop-hover{
background-color: greenyellow;
}