HTML5 拖放(Drag 和 Drop)html排序拖拽案例,vue仿照element穿梭框拖拽案例。

vue版本 

 

drag常见事件

hTMl 5 拖拽 使用拖拽需要在元素标签上设置 draggable = true

dragover 在可拖动的元素或者被选择的文本被拖进一个有效的放置目标后间隔几百毫秒持续进行触发 (简单来说就是拖拽到指定的目标元素就会就行持续触发,一般绑定到需要拖拽元素最外层的盒子)

dragstart 事件在用户开始拖动元素或被选择的文本时调用

dragleave 事件在拖动的元素或选中的文本离开一个有效的放置目标时被触发

dragend 事件在拖放操作结束时触发(通过释放鼠标按钮或单击 escape 键)。

drop 事件在元素或选中的文本被放置在有效的放置目标上时被触发

drag 事件在用户拖动元素或选择的文本时,每隔几百毫秒就会被触发一次。

dragenter 事件在可拖动的元素或者被选择的文本进入一个有效的放置目标时触发

html5 排序拖拽 




    
    
    
    拖拽




vue仿照element穿梭框支持拖拽功能




你可能感兴趣的:(组件封装,html5,前端,html)