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

时间:2015-10-01 11:39:22

标签: javascript jquery html css drag-and-drop

我为相对定位的div设置了一个简单的拖放设置,但是在使用CSS调整大小时,调整旧行上的元素而不是新行。除了jQuery之外,我不想使用任何库。

这是一个小提示,显示发生了什么:http://jsfiddle.net/RainyCats/6zega6zo/4/

代码:

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

要重复错误,请将div从顶行拖到其下方的行,然后将其水平调整大小,您将看到顶行中的元素将被移位。

这是一个问题的原因是因为我有其他功能,例如将div对接到屏幕左侧等。

非常感谢任何其他提示/最佳做法。 谢谢你们!

0 个答案:

没有答案