{"remainingRequest":"D:\\源码\\vue-element-admin-master\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\源码\\vue-element-admin-master\\src\\components\\DndList\\index.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\源码\\vue-element-admin-master\\src\\components\\DndList\\index.vue","mtime":1649647926000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\源码\\vue-element-admin-master\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ly8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KCmltcG9ydCBkcmFnZ2FibGUgZnJvbSAndnVlZHJhZ2dhYmxlJwoKZXhwb3J0IGRlZmF1bHQgewogIG5hbWU6ICdEbmRMaXN0JywKICBjb21wb25lbnRzOiB7IGRyYWdnYWJsZSB9LAogIHByb3BzOiB7CiAgICBsaXN0MTogewogICAgICB0eXBlOiBBcnJheSwKICAgICAgZGVmYXVsdCgpIHsKICAgICAgICByZXR1cm4gW10KICAgICAgfQogICAgfSwKICAgIGxpc3QyOiB7CiAgICAgIHR5cGU6IEFycmF5LAogICAgICBkZWZhdWx0KCkgewogICAgICAgIHJldHVybiBbXQogICAgICB9CiAgICB9LAogICAgbGlzdDFUaXRsZTogewogICAgICB0eXBlOiBTdHJpbmcsCiAgICAgIGRlZmF1bHQ6ICdsaXN0MScKICAgIH0sCiAgICBsaXN0MlRpdGxlOiB7CiAgICAgIHR5cGU6IFN0cmluZywKICAgICAgZGVmYXVsdDogJ2xpc3QyJwogICAgfSwKICAgIHdpZHRoMTogewogICAgICB0eXBlOiBTdHJpbmcsCiAgICAgIGRlZmF1bHQ6ICc0OCUnCiAgICB9LAogICAgd2lkdGgyOiB7CiAgICAgIHR5cGU6IFN0cmluZywKICAgICAgZGVmYXVsdDogJzQ4JScKICAgIH0KICB9LAogIG1ldGhvZHM6IHsKICAgIGlzTm90SW5MaXN0MSh2KSB7CiAgICAgIHJldHVybiB0aGlzLmxpc3QxLmV2ZXJ5KGsgPT4gdi5pZCAhPT0gay5pZCkKICAgIH0sCiAgICBpc05vdEluTGlzdDIodikgewogICAgICByZXR1cm4gdGhpcy5saXN0Mi5ldmVyeShrID0+IHYuaWQgIT09IGsuaWQpCiAgICB9LAogICAgZGVsZXRlRWxlKGVsZSkgewogICAgICBmb3IgKGNvbnN0IGl0ZW0gb2YgdGhpcy5saXN0MSkgewogICAgICAgIGlmIChpdGVtLmlkID09PSBlbGUuaWQpIHsKICAgICAgICAgIGNvbnN0IGluZGV4ID0gdGhpcy5saXN0MS5pbmRleE9mKGl0ZW0pCiAgICAgICAgICB0aGlzLmxpc3QxLnNwbGljZShpbmRleCwgMSkKICAgICAgICAgIGJyZWFrCiAgICAgICAgfQogICAgICB9CiAgICAgIGlmICh0aGlzLmlzTm90SW5MaXN0MihlbGUpKSB7CiAgICAgICAgdGhpcy5saXN0Mi51bnNoaWZ0KGVsZSkKICAgICAgfQogICAgfSwKICAgIHB1c2hFbGUoZWxlKSB7CiAgICAgIGZvciAoY29uc3QgaXRlbSBvZiB0aGlzLmxpc3QyKSB7CiAgICAgICAgaWYgKGl0ZW0uaWQgPT09IGVsZS5pZCkgewogICAgICAgICAgY29uc3QgaW5kZXggPSB0aGlzLmxpc3QyLmluZGV4T2YoaXRlbSkKICAgICAgICAgIHRoaXMubGlzdDIuc3BsaWNlKGluZGV4LCAxKQogICAgICAgICAgYnJlYWsKICAgICAgICB9CiAgICAgIH0KICAgICAgaWYgKHRoaXMuaXNOb3RJbkxpc3QxKGVsZSkpIHsKICAgICAgICB0aGlzLmxpc3QxLnB1c2goZWxlKQogICAgICB9CiAgICB9LAogICAgc2V0RGF0YShkYXRhVHJhbnNmZXIpIHsKICAgICAgLy8gdG8gYXZvaWQgRmlyZWZveCBidWcKICAgICAgLy8gRGV0YWlsIHNlZSA6IGh0dHBzOi8vZ2l0aHViLmNvbS9SdWJhWGEvU29ydGFibGUvaXNzdWVzLzEwMTIKICAgICAgZGF0YVRyYW5zZmVyLnNldERhdGEoJ1RleHQnLCAnJykKICAgIH0KICB9Cn0K"},{"version":3,"sources":["index.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"index.vue","sourceRoot":"src/components/DndList","sourcesContent":["<template>\n  <div class=\"dndList\">\n    <div :style=\"{width:width1}\" class=\"dndList-list\">\n      <h3>{{ list1Title }}</h3>\n      <draggable :set-data=\"setData\" :list=\"list1\" group=\"article\" class=\"dragArea\">\n        <div v-for=\"element in list1\" :key=\"element.id\" class=\"list-complete-item\">\n          <div class=\"list-complete-item-handle\">\n            {{ element.id }}[{{ element.author }}] {{ element.title }}\n          </div>\n          <div style=\"position:absolute;right:0px;\">\n            <span style=\"float: right ;margin-top: -20px;margin-right:5px;\" @click=\"deleteEle(element)\">\n              <i style=\"color:#ff4949\" class=\"el-icon-delete\" />\n            </span>\n          </div>\n        </div>\n      </draggable>\n    </div>\n    <div :style=\"{width:width2}\" class=\"dndList-list\">\n      <h3>{{ list2Title }}</h3>\n      <draggable :list=\"list2\" group=\"article\" class=\"dragArea\">\n        <div v-for=\"element in list2\" :key=\"element.id\" class=\"list-complete-item\">\n          <div class=\"list-complete-item-handle2\" @click=\"pushEle(element)\">\n            {{ element.id }} [{{ element.author }}] {{ element.title }}\n          </div>\n        </div>\n      </draggable>\n    </div>\n  </div>\n</template>\n\n<script>\nimport draggable from 'vuedraggable'\n\nexport default {\n  name: 'DndList',\n  components: { draggable },\n  props: {\n    list1: {\n      type: Array,\n      default() {\n        return []\n      }\n    },\n    list2: {\n      type: Array,\n      default() {\n        return []\n      }\n    },\n    list1Title: {\n      type: String,\n      default: 'list1'\n    },\n    list2Title: {\n      type: String,\n      default: 'list2'\n    },\n    width1: {\n      type: String,\n      default: '48%'\n    },\n    width2: {\n      type: String,\n      default: '48%'\n    }\n  },\n  methods: {\n    isNotInList1(v) {\n      return this.list1.every(k => v.id !== k.id)\n    },\n    isNotInList2(v) {\n      return this.list2.every(k => v.id !== k.id)\n    },\n    deleteEle(ele) {\n      for (const item of this.list1) {\n        if (item.id === ele.id) {\n          const index = this.list1.indexOf(item)\n          this.list1.splice(index, 1)\n          break\n        }\n      }\n      if (this.isNotInList2(ele)) {\n        this.list2.unshift(ele)\n      }\n    },\n    pushEle(ele) {\n      for (const item of this.list2) {\n        if (item.id === ele.id) {\n          const index = this.list2.indexOf(item)\n          this.list2.splice(index, 1)\n          break\n        }\n      }\n      if (this.isNotInList1(ele)) {\n        this.list1.push(ele)\n      }\n    },\n    setData(dataTransfer) {\n      // to avoid Firefox bug\n      // Detail see : https://github.com/RubaXa/Sortable/issues/1012\n      dataTransfer.setData('Text', '')\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.dndList {\n  background: #fff;\n  padding-bottom: 40px;\n  &:after {\n    content: \"\";\n    display: table;\n    clear: both;\n  }\n  .dndList-list {\n    float: left;\n    padding-bottom: 30px;\n    &:first-of-type {\n      margin-right: 2%;\n    }\n    .dragArea {\n      margin-top: 15px;\n      min-height: 50px;\n      padding-bottom: 30px;\n    }\n  }\n}\n\n.list-complete-item {\n  cursor: pointer;\n  position: relative;\n  font-size: 14px;\n  padding: 5px 12px;\n  margin-top: 4px;\n  border: 1px solid #bfcbd9;\n  transition: all 1s;\n}\n\n.list-complete-item-handle {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  margin-right: 50px;\n}\n\n.list-complete-item-handle2 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  margin-right: 20px;\n}\n\n.list-complete-item.sortable-chosen {\n  background: #4AB7BD;\n}\n\n.list-complete-item.sortable-ghost {\n  background: #30B08F;\n}\n\n.list-complete-enter,\n.list-complete-leave-active {\n  opacity: 0;\n}\n</style>\n"]}]}