我正在寻找一种纯JavaScript。
我唯一的问题是,我希望拖动的元素将其他元素推开。像这样的效果:
上面的gif通知中,第1项未替换为第4项,当您拖动第1项时,一切都会向上移动。希望如此。
在codepen中,如何制作推送效果?
function DragNSort(config) {
this.$activeItem = null;
this.$container = config.container;
this.$items = this.$container.querySelectorAll('.' + config.itemClass);
this.dragStartClass = config.dragStartClass;
this.dragEnterClass = config.dragEnterClass;
}
DragNSort.prototype.removeClasses = function() {
[].forEach.call(this.$items, function($item) {
$item.classList.remove(this.dragStartClass, this.dragEnterClass);
}.bind(this));
};
DragNSort.prototype.on = function(elements, eventType, handler) {
[].forEach.call(elements, function(element) {
element.addEventListener(eventType, handler.bind(element, this), false);
}.bind(this));
};
DragNSort.prototype.onDragStart = function(_this, event) {
_this.$activeItem = this;
this.classList.add(_this.dragStartClass);
event.dataTransfer.effectAllowed = 'move';
event.dataTransfer.setData('text/html', this.innerHTML);
};
DragNSort.prototype.onDragEnd = function(_this) {
this.classList.remove(_this.dragStartClass);
};
DragNSort.prototype.onDragEnter = function(_this) {
this.classList.add(_this.dragEnterClass);
};
DragNSort.prototype.onDragLeave = function(_this) {
this.classList.remove(_this.dragEnterClass);
};
DragNSort.prototype.onDragOver = function(_this, event) {
if (event.preventDefault) {
event.preventDefault();
}
event.dataTransfer.dropEffect = 'move';
return false;
};
DragNSort.prototype.onDrop = function(_this, event) {
if (event.stopPropagation) {
event.stopPropagation();
}
if (_this.$activeItem !== this) {
_this.$activeItem.innerHTML = this.innerHTML;
this.innerHTML = event.dataTransfer.getData('text/html');
}
_this.removeClasses();
return false;
};
DragNSort.prototype.bind = function() {
this.on(this.$items, 'dragstart', this.onDragStart);
this.on(this.$items, 'dragend', this.onDragEnd);
this.on(this.$items, 'dragover', this.onDragOver);
this.on(this.$items, 'dragenter', this.onDragEnter);
this.on(this.$items, 'dragleave', this.onDragLeave);
this.on(this.$items, 'drop', this.onDrop);
};
DragNSort.prototype.init = function() {
this.bind();
};
// Instantiate
var draggable = new DragNSort({
container: document.querySelector('.drag-list'),
itemClass: 'drag-item',
dragStartClass: 'drag-start',
dragEnterClass: 'drag-enter'
});
draggable.init();
.drag-list {
overflow: hidden;
margin: 10px auto;
width: 500px;
border: 1px solid #ccc;
}
.drag-item {
float: left;
padding: 50px 20px;
width: 25%;
text-align: center;
color: #555;
background: #ddd;
border: 1px solid #ccc;
box-sizing: border-box;
transition: 0.25s;
}
.drag-start {
opacity: 0.8;
}
.drag-enter {
opacity: 0.5;
transform: scale(0.9);
}
<div class="drag-list">
<div draggable="true" class="drag-item">A</div>
<div draggable="true" class="drag-item">B</div>
<div draggable="true" class="drag-item">C</div>
<div draggable="true" class="drag-item">D</div>
<div draggable="true" class="drag-item">E</div>
<div draggable="true" class="drag-item">F</div>
<div draggable="true" class="drag-item">G</div>
<div draggable="true" class="drag-item">H</div>
<div draggable="true" class="drag-item">I</div>
<div draggable="true" class="drag-item">J</div>
<div draggable="true" class="drag-item">K</div>
<div draggable="true" class="drag-item">L</div>
</div>
我尝试过的是
var buttons = document.getElementsByTagName('span');
for(var i = 0; i < buttons.length; i++){
buttons[i].ondragstart = function(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
document.getElementById('buttons').ondragover = function(ev) {
ev.preventDefault();
}
document.getElementById('buttons').ondrop = function(ev) {
var data = ev.dataTransfer.getData("Text");
ev.preventDefault(); $(document.getElementById(data)).insertBefore(ev.target);
}
}
span {
border: 1px solid black;
background: grey;
color: white;
padding: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="buttons">
<span draggable="true" id="btn1">1</span>
<span draggable="true" id="btn2">2</span>
<span draggable="true" id="btn3">3</span>
<span draggable="true" id="btn4">4</span>
<span draggable="true" id="btn5">5</span>
</div>
但没有预期的效果,我也不知道如何获得效果