vue3TS+Jsplumb+vuedraggable拖拽插件使用记录

vue3+TS+Jsplumb+vuedraggable拖拽插件使用记录

IN~Trying

3117人浏览 · 2022-06-17 21:27:51

IN~Trying · 2022-06-17 21:27:51 发布

安装拖拽插件
vue3需下载…@next此版本，否则会出现错误

npm i -S vuedraggable@next
npm install sortablejs --save //拖拽组件依赖sortablejs

npm install jsplumb --save

拖拽插件vuedraggable

vue2.x版本Draggable 组件中的配置项写法（:options=“draggableOptions”）在vue3中不起效，

vue3中需要将里面的参数单独进行配置，如 :force-fallback=“true” :group=“{name: ‘article’,pull:‘clone’}” :sort=‘false’ 等

vue2.x使用

<div class="flow-menu" ref="tool">
        <div v-for="menu in menuList" :key="menu.id">
            <span class="ef-node-pmenu" @click="menu.open = !menu.open">
               <i :class="{ 'el-icon-caret-bottom': menu.open, 'el-icon-caret-right': !menu.open }"></i>&nbsp;{{ menu.name }}</span>
          	<ul v-show="menu.open" class="ef-node-menu-ul">
              <draggable  @end="end" @start="move" v-model="menu.children" :options="draggableOptions">
                    <li v-for="subMenu in menu.children"
                        class="ef-node-menu-li"
                        :key="subMenu.id"
                        :type="subMenu.type">
                        {{ subMenu.name }}
                    </li>
             </draggable>
           </ul>
      </div>
</div>

import draggable from 'vuedraggable'
 
export default {
  components: {
    draggable
  },
  data () {
    return {
    //数据
    NodeLeftData: [
			{
				id: 'P301',
				type: 'P331',
				name: '实测',
				open: true,
				children: [
					{
						id: '11',
						type: '11',
						name: '实测子项1',
						state: 'Y',
						ico: 'el-icon-user-solid',
						scantype: 'NORM',
					},
					{
						id: '13',
						type: '13',
						name: '实测子项2',
						state: 'Y',
						ico: 'el-icon-user-solid',
						scantype: 'NORM',
					},
				],
			}
		],
		//配置项
      draggableOptions: {
         preventOnFilter: false,
          sort: false,
          disabled: false,
          ghostClass: "",
          // 不使用H5原生的配置
          forceFallback: true
          // 拖拽的时候样式
          // fallbackClass: 'flow-node-draggable'
      },
    }
  }

vue3.x

数据与上面一致

注意配置项的使用，vue3的配置项与vue2.x的配置项使用有区别
在此停留了许久才找出问题
（force-fallback 属性，可做元素拖拽过程的效果）

<div class="flow-menu" ref="tool">
		<div v-for="menu in menuList" :key="menu.id">
			<span class="ef-node-pmenu" @click="menu.open = !menu.open">
				<SvgIcon :name="menu.open ? 'ele-CaretBottom' : 'ele-CaretRight'" />
				&nbsp;{{ menu.name }}
			</span>
			<ul v-show="menu.open" class="ef-node-menu-ul">
				<!-- vue3中需要将里面的参数单独进行配置，如：:group="{name: 'article',pull:'clone'}"     :sort='false'  等
						force-fallback:  忽略HTML5的DnD行为，并强制退出。（h5里有个属性也是拖动，这里是为了去掉H5拖动对这个的影响， 也是用于拖动效果的实现
				 -->
				<Draggable v-model="menu.children" :force-fallback="true" :sort="false"  @end="end" @start="move">
				//template模板的使用也与vue2有所不同
					<template #item="{ element }" :item-key="element.id" :type="element.type">
						<li class="ef-node-menu-li">
							{{ element.name }}
						</li>
					</template>
				</Draggable>
			</ul>
		</div>
	</div>

vuedraggable部分参数

group: “name”, // or { name: “…”, pull: [true, false, clone], put: [true, false, array] } name相同的组可以互相拖动
sort: true, // 内部排序列表
delay: 0, // 以毫秒为单位定义排序何时开始。
touchStartThreshold: 0, // px,在取消延迟拖动事件之前，点应该移动多少像素?
disabled: false, // 如果设置为真，则禁用sortable。
store: null, // @see Store
animation: 150, // ms, 动画速度运动项目排序时，’ 0 ’ -没有动画。
handle: “.my-handle”, // 在列表项中拖动句柄选择器。
filter: “.ignore-elements”, // 不导致拖拽的选择器(字符串或函数)
preventOnFilter: true, // 调用“event.preventDefault()”时触发“filter”
draggable: “.item”, // 指定元素中的哪些项应该是可拖动的。
ghostClass: “sortable-ghost”, // 设置拖动元素的class的占位符的类名。
chosenClass: “sortable-chosen”, // 设置被选中的元素的class
dragClass: “sortable-drag”, //拖动元素的class。
dataIdAttr: ‘data-id’,
forceFallback: false, // 忽略HTML5的DnD行为，并强制退出。（h5里有个属性也是拖动，这里是为了去掉H5拖动对这个的影响
fallbackClass: “sortable-fallback”, // 使用forceFallback时克隆的DOM元素的类名。
fallbackOnBody: false, // 将克隆的DOM元素添加到文档的主体中。（默认放在被拖动元素的同级）
fallbackTolerance: 0, // 用像素指定鼠标在被视为拖拽之前应该移动的距离。
scroll: true, // or HTMLElement
scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { … }
scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling.
scrollSpeed: 10, // px

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^