注一:本方案结合了vue+iview
注二:ondragstart 事件(菜鸟教程:https://www.runoob.com/jsref/event-ondragstart.html)
1、定义和用法
ondragstart 事件在用户开始拖动元素或选择的文本时触发。
注意: 为了让元素可拖动,需要使用 HTML5 draggable 属性。
提示: 链接和图片默认是可拖动的,不需要 draggable 属性。
2、在拖放的过程中会触发以下事件:
2.1、在拖动目标上触发事件 (源元素):
(1)、ondragstart - 用户开始拖动元素时触发
(2)、ondrag - 元素正在拖动时触发
(3)、ondragend - 用户完成元素拖动后触发
2.2、释放目标时触发的事件:
(1)、ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
(2)、ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
(3)、ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
(4)、ondrop - 在一个拖动过程中,释放鼠标键时触发此事件
一、HTML结构
<!-- 1、一级分类部分(总数据)-->
<div class="mb10 mian">
<ul
class="dragButton"
style="width: 80px"
>
<li style="text-align: center">菜城一级分类(可拖入产品线)</li>
</ul>
<!-- deleteDrop事件,是从表格拖出,到此时,释放鼠标键时触发此事件,主要是为了删除从表格拖拽出的数据 -->
<!-- dragover.prevent 设置可拖拽-->
<ul
class="ml10 dragButton dragLi"
style="width: 90%"