Draggable 拖拽

使用指南

实现对组件元素的拖拽交互。

代码演示

查看代码

<template>
  <div class="list">
    <p>直接拖拽</p>
    <h3-draggable>
      <h3-button
        class="float-btn"
        type="primary"
        icon="IconPlusStroke"
        @click="handleBtnClick"
      />
    </h3-draggable>
    <p>仅X轴方向拖拽</p>
    <h3-draggable direction="x">
      <h3-button class="float-btn" type="primary" icon="IconPlusStroke" />
    </h3-draggable>
    <p>仅Y轴方向拖拽</p>
    <h3-draggable direction="y">
      <h3-button class="float-btn" type="primary" icon="IconPlusStroke" />
    </h3-draggable>
    <p>限制拖拽区域</p>
    <div class="drag-wrap">
    </div>
    <h3-draggable
      :boundary="{
        top: 400,
        left: 20,
        right: 100,
        bottom: 0,
      }"
    >
      <h3-button class="float-btn" type="primary" icon="IconPlusStroke" />
    </h3-draggable>
  
  </div>
</template>

<script>
import H3Draggable from '@/components/h3-draggable';
import H3Button from '@/components/h3-button/';
console.log(H3Draggable);
export default {
  components: {
    H3Draggable,
    H3Button,
  },

  data () {
    return {};
  },
  computed: {},
  methods: {
    handleBtnClick () {
      console.log('btnClick');
    },
  },
};
</script>
<style lang="less">
//  浮动按钮样式
.float-btn {
  .h3think-button__icon {
    margin-right: 0;
  }
}
</style>
<style lang="less" scoped>
.list {
  padding: 20px;
  p {
    font-weight: 600;
    font-size: 16px;
    padding: 15px 0;
    &:not(:first-child) {
      margin-top: 40px;
    }
  }

  .drag-wrap {
    background-color: white;
    position: fixed;
    left: 20Px;
    top: 400Px;
    bottom: 0;
    border: 1px solid red;
    width: calc(100% - 20Px - 100Px);
    height: calc(100% - 400Px);
  }

  .float-btn {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    box-shadow: 0 2px 12px 0 rgba(18, 25, 51, 0.1);
    z-index: 1;
  }
}
</style>

与thinking-ui 2.0版组件的区别以及迁移

新增组件

API

Prop

属性	说明	类型	默认值
direction	拖拽元素的拖拽方向限制，值为 all x y	string	all
boundary	拖拽元素的拖拽边界	object	{top: 0,left: 0,right: 0,bottom: 0}
disabled	是否可以拖拽	boolean	false

Slots

参数	说明
default	默认插槽, 可拖拽元素