原生drag拖拽

原生的drag拖拽指的是使用原生的HTML5的drag and drop API来实现拖拽功能。以下是一个简单的示例：

HTML：

<div id="dragElement" draggable="true">拖拽元素</div>
<div id="dropZone">放置区域</div>

JavaScript：

var dragElement = document.getElementById("dragElement");
var dropZone = document.getElementById("dropZone");

dragElement.addEventListener("dragstart", function(event) {
  // 设置拖拽的数据
  event.dataTransfer.setData("text/plain", event.target.id);
});

dropZone.addEventListener("dragover", function(event) {
  // 阻止默认的拖拽行为
  event.preventDefault();
});

dropZone.addEventListener("drop", function(event) {
  // 阻止默认的拖拽行为
  event.preventDefault();
  
  // 获取拖拽的数据
  var data = event.dataTransfer.getData("text/plain");
  
  // 将拖拽的元素添加到放置区域中
  var draggedElement = document.getElementById(data);
  dropZone.appendChild(draggedElement);
});

以上代码中，首先给拖拽元素和放置区域分别添加了id属性，然后在拖拽元素上设置了draggable属性为true，表示该元素可拖拽。

接着，通过addEventListener方法给拖拽元素添加了dragstart事件监听器，在该事件处理函数中，使用event.dataTransfer.setData方法设置了拖拽的数据，这里设置了拖拽元素的id。

然后，在放置区域上添加了dragover事件监听器，在该事件处理函数中，使用event.preventDefault方法阻止默认的拖拽行为，这样才能允许在该区域中放置拖拽元素。

最后，在放置区域上添加了drop事件监听器，在该事件处理函数中，使用event.preventDefault方法阻止默认的拖拽行为，然后使用event.dataTransfer.getData方法获取拖拽的数据，这里获取了拖拽元素的id，然后将拖拽的元素添加到放置区域中。

通过以上代码，就可以实现原生的drag拖拽功能