module-drag
Version:
<!-- * @Descripttion: * @version: * @Author: wb * @Date: 2024-02-29 10:49:25 * @LastEditTime: 2024-03-01 09:08:22 --> # module-drag
250 lines (221 loc) • 9.95 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("vue"));
else if(typeof define === 'function' && define.amd)
define([], factory);
else if(typeof exports === 'object')
exports["module-drag"] = factory(require("vue"));
else
root["module-drag"] = factory(root["Vue"]);
})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE__274__) {
return /******/ (function() { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ 274:
/***/ (function(module) {
module.exports = __WEBPACK_EXTERNAL_MODULE__274__;
/***/ })
/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/************************************************************************/
/******/ /* webpack/runtime/define property getters */
/******/ !function() {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = function(exports, definition) {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ !function() {
/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
/******/ }();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ !function() {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/publicPath */
/******/ !function() {
/******/ __webpack_require__.p = "";
/******/ }();
/******/
/************************************************************************/
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
!function() {
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
"default": function() { return /* binding */ entry_lib; }
});
;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
/* eslint-disable no-var */
// This file is imported into lib/wc client bundles.
if (typeof window !== 'undefined') {
var currentScript = window.document.currentScript
if (false) { var getCurrentScript; }
var src = currentScript && currentScript.src.match(/(.+\/)[^/]+\.js(\?.*)?$/)
if (src) {
__webpack_require__.p = src[1] // eslint-disable-line
}
}
// Indicate to webpack that this file can be concatenated
/* harmony default export */ var setPublicPath = (null);
// EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__(274);
;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./plugins/components/DragModules/DragModules.vue?vue&type=script&setup=true&lang=js
const _hoisted_1 = {
style: {
"text-align": "left"
}
};
const _hoisted_2 = ["data-index"];
/* harmony default export */ var DragModulesvue_type_script_setup_true_lang_js = ({
__name: 'DragModules',
props: {
dataList: {
type: Array
}
},
emits: ["on-darg"],
setup(__props, {
emit: __emit
}) {
const emit = __emit;
const props = __props;
const currList = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)([]);
const startIndex = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)('');
const enterIndex = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)('');
(0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.dataList, newV => {
currList.value = newV;
}, {
deep: true,
immediate: true
});
const dragstart = (e, list) => {
currList.value = list;
startIndex.value = e.target.getAttribute('data-index') || e.target.parentNode.getAttribute('data-index');
};
const dragenter = e => {
enterIndex.value = e.target.getAttribute('data-index') || e.target.parentNode.getAttribute('data-index');
};
const dragover = () => {
// console.log('object 66666666:>> ', e);
};
const dragend = (e, callback) => {
enterIndex.value = Number(enterIndex.value);
startIndex.value = Number(startIndex.value);
// 交换位置
// currList[enterIndex] = currList.splice(startIndex, 1, currList[enterIndex])[0];
// 按顺序排序
if (enterIndex.value < startIndex.value) {
// 拖动图片到前面
currList.value.splice(enterIndex.value, 0, currList.value[startIndex.value]);
currList.value.splice(Number(startIndex.value) + 1, 1);
} else {
// 拖动图片到后面
currList.value.splice(Number(enterIndex.value) + 1, 0, currList.value[startIndex.value]);
currList.value.splice(Number(startIndex.value), 1);
}
startIndex.value = '';
e.preventDefault(); // 设置为可以被拖放
if (callback) {
callback();
}
};
const changeSort = () => {
emit('on-darg', currList.value);
};
return (_ctx, _cache) => {
return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", _hoisted_1, [((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(true), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)(external_commonjs_vue_commonjs2_vue_root_Vue_.Fragment, null, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderList)(currList.value, (item, ind) => {
return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", {
class: "item",
key: ind,
draggable: "true",
"data-index": ind,
onDragstart: _cache[0] || (_cache[0] = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)($event => dragstart($event, currList.value), ["stop"])),
onDragenter: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.withModifiers)(dragenter, ["stop"]),
onDragover: dragover,
onDragend: _cache[1] || (_cache[1] = $event => dragend($event, changeSort))
}, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.renderSlot)(_ctx.$slots, "default", {
module: item
}, () => [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createTextVNode)((0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)(item), 1)])], 40, _hoisted_2);
}), 128))]);
};
}
});
;// CONCATENATED MODULE: ./plugins/components/DragModules/DragModules.vue?vue&type=script&setup=true&lang=js
;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-54.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-54.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-54.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./plugins/components/DragModules/DragModules.vue?vue&type=style&index=0&id=55496703&lang=css
// extracted by mini-css-extract-plugin
;// CONCATENATED MODULE: ./plugins/components/DragModules/DragModules.vue?vue&type=style&index=0&id=55496703&lang=css
;// CONCATENATED MODULE: ./plugins/components/DragModules/DragModules.vue
;
const __exports__ = DragModulesvue_type_script_setup_true_lang_js;
/* harmony default export */ var DragModules = (__exports__);
;// CONCATENATED MODULE: ./plugins/index.js
//plugins/index.js
//组件
//所有组件列表
const components = [DragModules];
//定义install方法，Vue作为参数
const install = Vue => {
//判断是否安装，安装过就不用继续执行
if (install.installed) return;
install.installed = true;
//遍历注册所有组件
components.map(component => Vue.component(component.name, component));
};
//检测到Vue再执行
if (typeof window !== "undefined" && window.Vue) {
install(window.Vue);
}
/* harmony default export */ var plugins = ({
install,
//所有组件，必须具有install方法才能使用Vue.use()
...components
});
;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js
/* harmony default export */ var entry_lib = (plugins);
}();
/******/ return __webpack_exports__;
/******/ })()
;
});
//# sourceMappingURL=module-drag.umd.js.map