如何使用HTML和CSS实现拖拽式布局

<div id="container">  <div class="draggable">元素1</div>  <div class="draggable">元素2</div>  <div class="draggable">元素3</div>  <div class="draggable">元素4</div></div>

#container {  width: 400px;  height: 300px;  border: 1px solid #ccc;  position: relative;}.draggable {  width: 100px;  height: 100px;  background-color: #f00;  position: absolute;  left: 0;  top: 0;  cursor: move;}

var draggables = document.getElementsByClassName('draggable');var container = document.getElementById('container');for (var i = 0; i < draggables.length; i++) {  draggables[i].addEventListener('dragstart', function (e) {    e.dataTransfer.setData('text/plain', null);    e.target.style.opacity = '0.5';  });  draggables[i].addEventListener('dragend', function (e) {    e.target.style.opacity = '1';  });}container.addEventListener('dragover', function (e) {  e.preventDefault();});container.addEventListener('drop', function (e) {  e.preventDefault();  var offsetX = e.clientX - container.getBoundingClientRect().left;  var offsetY = e.clientY - container.getBoundingClientRect().top;  var draggable = document.createElement('div');  draggable.className = 'draggable';  draggable.style.left = offsetX + 'px';  draggable.style.top = offsetY + 'px';  container.appendChild(draggable);  draggable.addEventListener('dragstart', function (e) {    e.dataTransfer.setData('text/plain', null);    e.target.style.opacity = '0.5';  });  draggable.addEventListener('dragend', function (e) {    e.target.style.opacity = '1';  });});