<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>移动元素</title> <style> body { font-size: 14px; } #left,
#right { width:50px; height:300px; border: 1px solid #ccc; white-space: pre-line; } span { display: inline-block; } </style> </style> </head> <body>
<div id="left" > <span class="tag1" draggable="true">index1</span> <span class="tag1" draggable="true">index2</span> <span class="tag1" draggable="true">index3</span> <span class="tag1" draggable="true">index4</span> <span class="tag1" draggable="true">index5</span> <span class="tag1" draggable="true">index6</span> <span class="tag1" draggable="true">index7</span> </div> <div id="right" >
</div> <script src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> jQuery.fn.cleanWhitespace = function() {
this.contents().filter(
function() { return (this.nodeType == 3 && !/\S/.test(this.nodeValue)); })
.remove();
return this;
} $(function(){ var moveItem = document.getElementsByTagName('span'); for (let i = 0; i < moveItem.length; i++) {
moveItem[i].setAttribute('id', 'label' + i);
moveItem[i].ondragstart = function (ev) {
ev.dataTransfer.setData("Text", this.id);
} } document.getElementById('right').ondragover = function (ev) {
ev.preventDefault(); } document.getElementById('right').ondrop = function (ev) {
ev.preventDefault();
var id = ev.dataTransfer.getData('Text');
var elem = document.getElementById(id);
var toElem = ev.toElement.id;
if (toElem == 'right') {
this.appendChild(elem);
} else {
this.insertBefore(elem, document.getElementById(toElem));
}
$('#right').cleanWhitespace(); } document.getElementById('left').ondragover = function (ev) {
ev.preventDefault(); } document.getElementById('left').ondrop = function (ev) {
ev.preventDefault();
var id = ev.dataTransfer.getData('Text');
var elem = document.getElementById(id);
var toElem = ev.toElement.id;
if (toElem == 'left') {
this.appendChild(elem);
} else {
this.insertBefore(elem, document.getElementById(toElem));
}
$('#left').cleanWhitespace(); } })
</script> </body> </html>
移动html元素
最新推荐文章于 2024-01-16 21:39:28 发布