如何在java script中添加拖放元素的效果

<div draggable="true">可拖动的元素</div>

var draggableElement = document.querySelector('div');

draggableElement.addEventListener('dragstart', function(event) {
  // 设置拖动元素的数据
  event.dataTransfer.setData('text/plain', '拖动的数据');
  
  // 设置拖动效果为移动
  event.dataTransfer.effectAllowed = 'move';
});

draggableElement.addEventListener('dragend', function(event) {
  // 拖动结束后的处理
});

var droppableArea = document.querySelector('.droppable-area');

droppableArea.addEventListener('dragover', function(event) {
  // 阻止默认的事件行为
  event.preventDefault();
  
  // 设置放置元素的效果为移动
  event.dataTransfer.dropEffect = 'move';
});

droppableArea.addEventListener('drop', function(event) {
  // 阻止默认的事件行为
  event.preventDefault();
  
  // 获取拖动元素的数据
  var data = event.dataTransfer.getData('text/plain');
  
  // 处理放置元素的逻辑
  droppableArea.textContent = data;
});