Question

我已经通过npm尝试了multielect-two-sides软件包，但是它不起作用，在vuejs中没有其他软件包可以做同样的事情，是否有任何手动方法甚至一个软件包都可以轻松地做到这一点。注意：jQuery包含在我的Vuejs项目中。请帮忙。

Answer 1

在检查了multiselect-two-sides提供的功能之后，我将向您建议一个vue插件，它具有更高的交互性，即vue-draggable

安装

 npm install vue-draggable

设置

  import Vue from 'vue'
  import VueDraggable from 'vue-draggable'

  Vue.use(VueDraggable)
   ....

用法

<div v-drag-and-drop:options="options">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <ul>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
  </ul>
</div>

完整示例

Vue.use(VueDraggable);

new Vue({
  data: {
    options: {
      // dropzoneSelector: 'ul',
      // draggableSelector: 'li',
      // excludeOlderBrowsers: true,
      // showDropzoneAreas: true,
      // multipleDropzonesItemsDraggingEnabled: true,
      // onDrop(event) {},
      // onDragstart(event) {
      //   event.stop();
      // },
      // onDragend(event) {
      //   event.stop();
      // }
    }
  },
  template: `
  <div v-drag-and-drop:options="options" class="drag-wrapper">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
    <ul>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
    </ul>
    <ul>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
    </ul>
  </div>
  `
}).$mount("#app");

.drag-wrapper {
  display: flex;
  justify-content: center;
}

ul {
  display: flex;
  flex-direction: column;
  padding: 3px !important;
  min-height: 70vh;
  width: 100px;
  float: left;
  list-style-type: none;
  overflow-y: auto;
  border: 2px solid #888;
  border-radius: 0.2em;
  background: #8adccc;
  color: #555;
  margin-right: 5px;
}


/* drop target state */

ul[aria-dropeffect="move"] {
  border-color: #68b;
  background: #fff;
}


/* drop target focus and dragover state */

ul[aria-dropeffect="move"]:focus,
ul[aria-dropeffect="move"].dragover {
  outline: none;
  box-shadow: 0 0 0 1px #fff, 0 0 0 3px #68b;
}


/* draggable items */

li {
  display: block;
  list-style-type: none;
  margin: 0 0 2px 0;
  padding: 0.2em 0.4em;
  border-radius: 0.2em;
  line-height: 1.3;
}

li:hover {
  box-shadow: 0 0 0 2px #68b, inset 0 0 0 1px #ddd;
}


/* items focus state */

li:focus {
  outline: none;
  box-shadow: 0 0 0 2px #68b, inset 0 0 0 1px #ddd;
}


/* items grabbed state */

li[aria-grabbed="true"] {
  background: #5cc1a6;
  color: #fff;
}

@keyframes nodeInserted {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 0.8;
  }
}

.item-dropzone-area {
  height: 2rem;
  background: #888;
  opacity: 0.8;
  animation-duration: 0.5s;
  animation-name: nodeInserted;
}

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
  <script src="https://unpkg.com/vue-draggable@1.0.5/lib/vue-draggable.js"></script>
</head>

<body>
  <div id="app"></div>
</body>

</html>

如何在Vuejs中创建多选两侧

1 个答案: