您可以使用HTML5中的拖放API和JavaScript来创建可拖动的元素。具体步骤如下：
首先，您需要为要拖动的元素添加一个事件监听器，以便在拖动开始时触发。
在该事件监听器中，您需要使用event.dataTransfer.setData()方法将要拖动的数据设置为数据传输对象的数据。
接下来，您需要为目标元素添加一个事件监听器，以便在拖动元素进入它的边界时触发。
在该事件监听器中，您需要使用event.preventDefault()方法来防止浏览器默认的行为发生，并使用event.dataTransfer.getData()方法从数据传输对象中获取拖动的数据。
您还需要在该事件监听器中使用event.target.appendChild()方法将拖动的元素添加到目标元素中。
下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>可拖动的元素</title>
<style>
#drag {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
top: 0;
}
#drop {
width: 200px;
height: 200px;
background-color: blue;
position: absolute;
right: 0;
top: 0;
}
</style>
</head>
<body>
<div id="drag" draggable="true"></div>
<div id="drop"></div>
<script>
var drag = document.getElementById("drag");
var drop = document.getElementById("drop");
drag.addEventListener("dragstart", function(event) {
event.dataTransfer.setData("text/plain", event.target.id);
});
drop.addEventListener("dragover", function(event) {
event.preventDefault();
});
drop.addEventListener("drop", function(event) {
event.preventDefault();
var data = event.dataTransfer.getData("text/plain");
event.target.appendChild(document.getElementById(data));
});
</script>
</body>
</html>在这个例子中，我们创建了一个可拖动的红色元素和一个蓝色的目标元素。当用户开始拖动红色元素时，事件监听器会将其ID设置为数据传输对象的数据。当用户将红色元素拖动到蓝色目标元素上时，事件监听器会将目标元素作为父元素，并将红色元素添加到目标元素中。
