2021-1-22 vue 拖拽box,并交换位置【js原生】,组件、指令

原生拖拽

<div class="dock flex-row" ref="dock" :class="{collapse: isCollapse}">
		<ul class="dock-icons flex-row ali-center" ref="icons">
        <li class="dock-icon flex-col" v-for="(item, i) in dock" :key="i" draggable="true"
            @dragstart.stop="handleDragStart($event, item)"
            @dragover="handleDragOver($event, item)"
            @dragenter.prevent="handleDragEnter($event, item)"
            @dragend="handleDragEnd($event, item)">
          <svg class="icon" aria-hidden="true">
            <use :xlink:href="`#icon-${item.icon}`"></use>
          </svg>
          <span class="icon-name">{{item.name}}</span>
        </li>
		</ul>
		<div class="opera-btn" ref="operat">
			可点击拖拽
		</div>
</div>
handleDrag () {
      this.$nextTick(() => {
        let flag = false
        let dock = this.$refs.dock;
        let opera = this.$refs.operat;
        let dockX = 0
        let dockY = 0
        let mouseX = 0
        let mouseY = 0
        let moveX = 0
        let moveY = 0

        opera.onmousedown = e => {
          this.startDrag = true
          flag = true
          dockX = dock.offsetLeft
          dockY = dock.offsetTop
          mouseX = e.clientX
          mouseY = e.clientY
          if (this.isCollapse) {
            this.isCollapse = false
            this.$refs.dock.style.left = "50%"
            this.$refs.dock.style.top = "88vh"
          }
        }

        document.onmousemove = e => {
          if (this.startDrag) {
            this.dragging = true
            moveX = e.clientX - mouseX + dockX
            moveY = e.clientY - mouseY + dockY

            let ww = document.body.clientWidth
            let wh = document.body.clientHeight

            dock.style.opacity = 1

            if (moveX <= dock.clientWidth / 2 && !this.isCollapse) {
              moveX = dock.clientWidth / 2
              dock.style.opacity = .5
            }
            if (moveX >= ww - dock.clientWidth / 2) moveX = ww - dock.clientWidth / 2
            if (moveY <= 0) moveY = 0
            if (moveY >= wh - dock.clientHeight) moveY = wh - dock.clientHeight

            dock.style.left = moveX + "px"
            dock.style.top = moveY + "px"
          }
        }

        document.addEventListener("mouseup", e => {
          if (flag) {
            this.startDrag = false

            if (this.dragging) {
              if ((moveX <= dock.clientWidth / 2) && !this.isCollapse) {
                dock.style.opacity = 1
                this.isCollapse = true
              }
            } else {

            }

            this.dragging = false
            flag = false
          }

        })
      })
    },
    handleDragStart (e, item) {
      this.draggingItem = item;
    },
    handleDragEnd (e) {
      this.draggingItem = null;
    },
    //首先把div变成可以放置的元素,即重写dragenter/dragover
    handleDragOver (e) {
      e.dataTransfer.dropEffect = "move";// e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
    },
    handleDragEnter (e, item) {
      e.dataTransfer.effectAllowed = "move";//为需要移动的元素设置dragstart事件
      /*if(item === this.draggingItem) {
        return;
      }*/
      const newItems = [...this.dock];
      const src = newItems.indexOf(this.draggingItem);
      const dst = newItems.indexOf(item);

      newItems.splice(dst, 0, ...newItems.splice(src, 1));

      this.dock = newItems;
    },

组件或指令

组件或指令

参考“;
http://t.zoukankan.com/xuxiaoxia-p-8405076.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web-component-wrapper 是一个功能强大的工具,可以将 Vue 组件包装并将其注册为自定义元素。Vue 组件是以 Vue 实例的形式存在的,而自定义元素是原生的 HTML 元素,通过包装和注册,我们可以在非 Vue 应用使用 Vue 组件。 首先,我们需要通过 npm 或者 yarn 安装 web-component-wrapper。然后,在需要包装的 Vue 组件,我们可以使用 `Vue.config.ignoredElements` 配置选项将自定义元素排除在 Vue 的解析范围之外,以免 Vue 试图解析未知的 HTML 元素。 接下来,在我们的 Vue 组件,我们需要使用 `customElements.define()` 方法将其注册为自定义元素。这个方法接收两个参数,第一个参数是组件名称,这个名称将会成为自定义元素的标签名;第二个参数是包装后的组件类。 然后,我们可以在任何非 Vue 应用的 HTML 文件使用刚刚注册的自定义元素了。我们只需要使用自定义元素的标签名,就可以将其在页面使用。在需要为自定义元素传递数据时,我们可以使用 HTML 的属性或者 data-* 属性来传递值。 当我们在非 Vue 应用使用注册的自定义元素时,web-component-wrapper 会自动处理 Vue 组件的生命周期和数据响应。这意味着我们可以像在 Vue 应用一样,对自定义元素进行事件监听、数据绑定等操作。 web-component-wrapper 包装并注册 Vue 组件为自定义元素的过程非常简单,使得我们可以跨平台或者与其他框架集成使用 Vue 组件。这为我们提供了更多的灵活性和便利性,使得我们可以更好地使用 Vue 组件的能力。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值