vue.draggable多列拖拽支持模糊搜索及重置

最新推荐文章于 2024-12-09 18:37:47 发布

hyduan200

最新推荐文章于 2024-12-09 18:37:47 发布

阅读量1.4k

点赞数 2

分类专栏：前端小技巧 vue 文章标签： css vue.js html

本文链接：https://blog.csdn.net/duanhy_love/article/details/120081099

版权

前端小技巧同时被 2 个专栏收录

48 篇文章

订阅专栏

vue

40 篇文章

订阅专栏

本文展示了如何使用 Vue.draggable 库创建一个具备模糊搜索功能的双栏可拖拽列表。通过 Vue 文件和 JavaScript 代码，实现了在两个列表之间拖放元素的功能，同时提供了输入框进行模糊查询。CSS 样式定义了拖拽过程中的视觉反馈，如拖动、选中和空提示元素的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue.draggable官网：https://www.itxst.com/vue-draggable/fueijmfy.html

实现效果

在这里插入图片描述

实现代码

vue文件中

  <div class="itxst">
              <div class="col">
                <!-- <div class="title">主体（可模糊查询）</div> -->
                <el-input
                  v-model="inputValue1"
                  size="mini"
                  clearable
                  style="margin-bottom: 5px"
                  placeholder="网站（可模糊查询）"
                ></el-input>
                <draggable
                  v-model="arr1"
                  group="site"
                  animation="300"
                  dragClass="dragClass"
                  ghostClass="ghostClass"
                  chosenClass="chosenClass"
                  @start="onStartOne"
                  @end="onEndOne"
                >
                  <transition-group>
                    <template v-for="item in arr1">
                      <div
                        class="item"
                        v-if="
                          !inputValue1 || item.name.indexOf(inputValue1) != -1
                        "
                        :key="item.id"
                      >
                        {{ item.name }}
                      </div>
                    </template>
                    <div v-if="!arr1.length" key="emptyTips" class="emptyItem">
                      <img src="@/assets/images/drag.png" /><br />
                      <span>可将右侧类别拖放至这个类别</span>
                    </div>
                  </transition-group>
                </draggable>
              </div>
              <div class="col">
                <div class="title" style="margin-top: 5px">
                  <span>网站</span>
                  <el-tooltip
                    effect="dark"
                    content="点击可重置该定制化查询条件"
                    placement="top-end"
                  >
                    <el-button
                      style="float: right; padding: 0"
                      @click="initForm"
                      type="text"
                      icon="el-icon-refresh-right"
                    ></el-button>
                  </el-tooltip>
                </div>
                <draggable
                  v-model="arr2"
                  group="site"
                  animation="100"
                  dragClass="dragClass"
                  ghostClass="ghostClass"
                  chosenClass="chosenClass"
                  @start="onStartOne"
                  @end="onEndOne"
                >
                  <transition-group>
                    <div class="item" v-for="item in arr2" :key="item.id">
                      {{ item.name }}
                    </div>
                    <div key="emptyTips" v-if="!arr2.length" class="emptyItem">
                      <img src="@/assets/images/drag.png" /><br />
                      <span>可将左侧类别拖放至这个类别</span>
                    </div>
                  </transition-group>
                </draggable>
              </div>
            </div>

js文件中data

           dragOne: false,
            inputValue1: '',
            arr1: [
                { id: 1, name: 'www.google.com' },
                { id: 2, name: 'www.msn.com' },
                { id: 3, name: 'www.ebay.com' },
                { id: 4, name: 'www.yahoo.com' },
                { id: 5, name: 'www.itxst.com' },
                { id: 6, name: 'www.jd.com' },
                { id: 7, name: 'www.baidu.com' },
                { id: 8, name: 'www.taobao.com' },
             ],
            arr2: [ ],

js methods中

  // 拖拽组件1
        onStartOne () {
            this.dragOne = true;
        },
        onEndOne () {
            this.dragOne = false;
        },
    // 重置
          initForm () {
              arr1: [
                { id: 1, name: 'www.google.com' },
                { id: 2, name: 'www.msn.com' },
                { id: 3, name: 'www.ebay.com' },
                { id: 4, name: 'www.yahoo.com' },
                { id: 5, name: 'www.itxst.com' },
                { id: 6, name: 'www.jd.com' },
                { id: 7, name: 'www.baidu.com' },
                { id: 8, name: 'www.taobao.com' },
             ],
            arr2: [ ],
            this.arr2 = []
        },

css文件中

/*定义要拖拽元素的样式*/
.ghostClass {
  background-color: rgb(144, 144, 226) !important;
}
.chosenClass {
  background-color: rgb(228, 168, 168) !important;
  opacity: 1 !important;
}
.dragClass {
  background-color: rgb(191, 158, 223) !important;
  opacity: 1 !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
}
.itxst {
  margin: 10px;
  /* min-height: 200px; */
  overflow: auto;
  max-height: 350px;
  width: 45%;
  padding: 10px 0 10px 30px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  background-color: #f5fafa;
  border: 1px solid #eee;
}
.title {
  margin-bottom: 10px;
  color: #92d9d9;
  /* color: #e4b2b2; */
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.col {
  width: 40%;
  flex: 1;
  padding: 10px;
  border: solid 1px #eee;
  border-radius: 5px;
  float: left;
}
.col + .col {
  margin-left: 10px;
}
.itemBox {
  max-height: 400px;
  overflow-y: scroll;
}
.item {
  text-align: center;
  padding: 6px 0;
  color: #000;
  font-size: 10px;
  margin: 0px 10px 0px 10px;
  border: solid 1px #eee;
  background-color: #f1f1f1;
}
.item:hover {
  background-color: #fdfdfd;
  cursor: move;
}
.item + .item {
  border-top: none;
  margin-top: 6px;
}
.emptyItem {
  min-height: 300px;
  text-align: center;
  width: 100%;
  color: #9dccf1;
  font-size: 12px;
  /* -webkit-animation: Tada 1s 2s both infinite;
  -moz-animation: Tada 1s 2s both infinite;
  -ms-animation: Tada 1s 2s both infinite;
  animation: Tada 1s 2s both infinite; */
}
.emptyItem img {
  margin-top: 100px;
  margin-bottom: 10px;
}