Javascript 拖放div会在调整大小时移动错误的div行

对于相对定位的div，我有一个简单的拖放设置，但是在使用CSS的resize调整它们的大小时，旧行上的元素将被移动，而不是新行。除了jQuery，我不想使用任何库

这是一把小提琴，显示发生了什么：

代码：

    <div id='container'>`
        <div id='main'></div>`
    </div>

#container {
    width: 500px;
    height: 500px;
    position: absolute;
}

#main {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.tile {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: #128CAB;
    resize: both;
    border: 1px solid #DDD;
    border-radius: 2px;
    box-shadow: 2px 2px #CCC;
    margin: 15px;
    cursor: grab;
    overflow: auto;
}


for (var i = 0; i < 6; i++) {
    var tile = "<div class='tile' draggable='true' id='" + i +"'></div>"
    $('#main').append(tile);
    $('#'+i).append('<p>'+i+'</p>');
    addListeners(document.getElementById(i));
}
function addListeners(el) {
    el.addEventListener('dragstart', handleDragStart, false);
    el.addEventListener('dragenter', handleDragEnter, false);
    el.addEventListener('dragover', handleDragOver, false);
    el.addEventListener('dragleave', handleDragLeave, false);
    el.addEventListener('drop', handleDragDrop, false);
}


function handleDragStart (event) {
    event.stopPropagation();
    console.log('called drag start');
    event.dataTransfer.effectAllowed = 'all';

    //send id of DnD source
    event.dataTransfer.setData('text/plain', this.id);
}


function handleDragEnter(event) {
    event.stopPropagation();
    event.preventDefault();
    event.dataTransfer.dropEffect = 'move';
    console.log('called drag enter');

}

function handleDragOver(event) {
    event.stopPropagation();
    event.preventDefault();  
    console.log('called drag over');

}

function handleDragLeave(event) {
    event.stopPropagation();
    event.preventDefault();
    console.log('called drag leave');

}

function handleDragEnd(event) {
    event.stopPropagation();
    event.preventDefault();
    console.log('called drag end');

}

function handleDragDrop(event) {
    event.stopPropagation();
    event.preventDefault();   
    console.log('called drag drop');

    //get the source element and its offset
    var srcId = event.dataTransfer.getData('text/plain');
    var srcEl = document.getElementById(srcId);
    var srcOffset = $('#'+srcId).offset();

    var targetOffset = $('#'+this.id).offset();


    //swap the offsets of the target and source    
    var newSrcOffset = {'left':targetOffset.left, 'top': targetOffset.top};
    $('#'+srcId).offset(newSrcOffset);

    var newTargetOffset = {'left':srcOffset.left, 'top': srcOffset.top};
    $('#'+this.id).offset(newTargetOffset);
}

`
`
#容器{
宽度：500px；
高度：500px；
位置：绝对位置；
}
#主要{
位置：相对位置；
显示器：flex；
柔性包装：包装；
证明内容：周围的空间；
}
.瓷砖{
位置：相对位置；
宽度：100px；
高度：100px；
背景色：#128CAB；
调整大小：两者；
边框：1px实心#DDD；
边界半径：2px；
盒影：2px 2px#CCC；
利润率：15px；
光标：抓取；
溢出：自动；
}
对于（变量i=0；i<6；i++）{
var tile=“”
$（'#main'）。附加（平铺）；
$（'#'+i）.append（''+i+'
'）；
addListeners（document.getElementById（i））；
}
函数addListeners（el）{
el.addEventListener（'dragstart'，handleDragStart，false）；
el.addEventListener（'dragenter'，handleDragEnter，false）；
el.addEventListener（'Dragver'，handleDragOver，false）；
el.addEventListener（'dragleave'，handleDragLeave，false）；
el.addEventListener（'drop'，handleDragDrop，false）；
}
函数handleDragStart（事件）{
event.stopPropagation（）；
log（'称为拖动启动'）；
event.dataTransfer.effectAllowed='all'；
//DnD源的发送id
event.dataTransfer.setData（'text/plain'，this.id）；
}
函数handleDragEnter（事件）{
event.stopPropagation（）；
event.preventDefault（）；
event.dataTransfer.dropEffect='move'；
log（'称为拖动回车'）；
}
功能处理（事件）{
event.stopPropagation（）；
event.preventDefault（）；
log（'称为拖放'）；
}
功能handleDragLeave（事件）{
event.stopPropagation（）；
event.preventDefault（）；
log（'称为拖动离开'）；
}
函数handleDragEnd（事件）{
event.stopPropagation（）；
event.preventDefault（）；
log（'称为拖动结束'）；
}
函数handleDragDrop（事件）{
event.stopPropagation（）；
event.preventDefault（）；
log（“称为拖放”）；
//获取源元素及其偏移量
var srcId=event.dataTransfer.getData（'text/plain'）；
var srcEl=document.getElementById（srcId）；
var srcpoffset=$（'#'+srcId）.offset（）；
var targetOffset=$（'#'+this.id）.offset（）；
//交换目标和源的偏移
var newsrcloffset={'left'：targetOffset.left，'top'：targetOffset.top}；
$（'#'+srcId）.offset（newsrcdoffset）；
var newTargetToffset={'left'：srcpoffset.left，'top'：srcpoffset.top}；
$（'#'+this.id）.offset（newTargetOffset）；
}

要重复该错误，请将一个div从顶行拖动到它下面的行，然后水平调整它的大小，您将看到顶行的元素将被移动

这是一个问题的原因，因为我有其他功能，如停靠在屏幕左侧的div等

非常感谢任何其他提示/最佳实践。 谢谢大家