我为相对定位的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对接到屏幕左侧等。
非常感谢任何其他提示/最佳做法。 谢谢你们!