js html5新属性 元素拖拽

菜鸟教程：html5新增的鼠标事件中有对元素拖拽属性进行定义

其他博主的例子

这个博主讲的详细一点 

---

参考上述博主的事件描述： 

ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
ondragend 事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上

 

（图源：见第一个水印） 

拖拽事件写法： 

 <ul>
    <li
       v-for= "item in dataList"
       :key= "item.id"
       draggable= 'true'
       @dragstart="handleDragStart($event, item)"
       @dragover.prevent="handleDragOver($event, item)"
       @dragenter="handleDragEnter($event, item)"
       @dragend="handleDragEnd($event, item)"
       style="cursor: pointer"
   >
    {{item.name}}
   </li>
</ul>


<script>
export default{
    data(){
        return{
            dataList:[],
            startElement:null,  //开始拖拽元素
            endElement:null,  //结束拖拽元素
        }
    },
    methods:{
        handleDragStart(e,item) {      //这个函数作用于开始拖拽的元素，能拿到被拖拽的元素
            this.startElement = item;
        },
         
        handleDragEnter(e,item) {      //这个函数作用于结束拖拽的元素，能拿到拖拽的目标元素
            this.endElement = item;
        }
    }
}
</script>

 注意点：

        1、除了<img>、<a>标签外，其他可以拖拽的标签需要开启：draggable=“true”这个属性； 

        2、在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发（本例中使用简写形式，在标签中使用.prevent标识）。

        3、可以利用ondragstart绑定的函数拿到被拖拽的元素；利用ondragenter绑定的函数拿到拖拽的目标元素。