Как создать мульти выделить две стороны в Vuejs - PullRequest
Новая
       6

Как создать мульти выделить две стороны в Vuejs

0 голосов
/ 07 ноября 2018

Я пробовал пакет multielect-two-side через npm, но он не работает, и нет других пакетов, которые делают то же самое в vuejs, есть ли какой-либо ручной способ или даже пакет может сделать это легко. Примечание: jQuery включен в мой проект Vuejs. пожалуйста, помогите.

1 Ответ

0 голосов
/ 07 ноября 2018

После проверки функций, предлагаемых 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>
...