原生拖拽排序设置拖拽点，并且有过度动画效果

原生拖拽排序通常涉及到HTML5的`draggable`属性和CSS样式，以及JavaScript事件处理。在设置拖拽点并添加过渡动画效果时，你需要做以下几个步骤：

1. **启用拖拽**：给需要排序的元素添加`draggable="true"`属性，例如：

   <div draggable="true" id="drag-item">拖动我</div>

2. **防止默认行为**：为了控制拖动过程，你需要阻止浏览器的一些默认行为，如文本选择、页面滚动等：

   document.getElementById('drag-item').ondragstart = function(e) {
     e.preventDefault();
     // 其他初始化操作...
   }

3. **设置拖拽目标**：定义`ondragover`和`ondrop`事件监听器，判断拖动元素是否可以放在指定位置，并可能更新布局：

   var dragTarget = document.getElementById('drop-zone');
   dragTarget.ondragover = function(e) {
     e.preventDefault();
     this.classList.add('hover'); // 添加过渡效果
   };
   dragTarget.ondrop = function(e) {
     e.preventDefault();
     this.classList.remove('hover'); // 移除过渡效果
     // 根据需要重新排列元素...
   };

4. **过渡动画**：对于视觉上的过度动画，你可以利用CSS `transition` 或者 JavaScript 动画库（如Animate.css）来创建。比如添加 `.hover` 类时改变元素的位置，并加上透明度变化：

   .hover {
     transition: transform 0.3s ease, opacity 0.3s;
     transform: translateX(5px);
     opacity: 0.8;
   }

完成以上步骤后，用户就可以在页面上拖动元素并在释放鼠标时自动调整顺序，同时享受到平滑的过渡动画效果。