解决Vue.Draggable在Vue新版3.2.32上运行报错“Cannot set properties of null (setting '__draggable_context')”的问题。

lib/vuedraggable/dist/vuedraggable.common.js

@@ -1774,7 +1774,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
     if (descriptor && descriptor.get !== getCurrentScript && document.currentScript) {
       return document.currentScript
     }
-
+  
     // IE 8-10 support script readyState
     // IE 11+ & Firefox support stack trace
     try {
@@ -1792,24 +1792,24 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
         inlineScriptSourceRegExp,
         inlineScriptSource,
         scripts = document.getElementsByTagName('script'); // Live NodeList collection
-
+  
       if (scriptLocation === currentLocation) {
         pageSource = document.documentElement.outerHTML;
         inlineScriptSourceRegExp = new RegExp('(?:[^\\n]+?\\n){0,' + (line - 2) + '}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*', 'i');
         inlineScriptSource = pageSource.replace(inlineScriptSourceRegExp, '$1').trim();
       }
-
+  
       for (var i = 0; i < scripts.length; i++) {
         // If ready state is interactive, return the script tag
         if (scripts[i].readyState === 'interactive') {
           return scripts[i];
         }
-
+  
         // If src matches, return the script tag
         if (scripts[i].src === scriptLocation) {
           return scripts[i];
         }
-
+  
         // If inline source matches, return the script tag
         if (
           scriptLocation === currentLocation &&
@@ -1819,7 +1819,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
           return scripts[i];
         }
       }
-
+  
       // If no match, return null
       return null;
     }
@@ -4259,7 +4259,7 @@ function insertNodeAt(fatherNode, node, position) {
 
 
 // EXTERNAL MODULE: ./src/util/console.js
-var console = __webpack_require__("dbf1");
+var util_console = __webpack_require__("dbf1");
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.reduce.js
 var es_array_reduce = __webpack_require__("13d5");
@@ -4460,9 +4460,15 @@ function _createClass(Constructor, protoProps, staticProps) {
 
 
 
-var getHtmlElementFromNode = function getHtmlElementFromNode(_ref) {
-  var el = _ref.el;
-  return el;
+//const getHtmlElementFromNode = ({ el }) => el;
+var getHtmlElementFromNode = function getHtmlElementFromNode(node) {
+  var el = node.el || Array.isArray(node.children) && node.children[0].el.parentNode;
+
+  if (!el) {
+    console.error("使用 transition-group , 需要在slot中template内至少2层html标签");
+  }
+
+  return el || {};
 };
 
 var addContext = function addContext(domElement, context) {
@@ -4474,13 +4480,13 @@ var getContext = function getContext(domElement) {
 };
 
 var componentStructure_ComponentStructure = /*#__PURE__*/function () {
-  function ComponentStructure(_ref2) {
-    var _ref2$nodes = _ref2.nodes,
-        header = _ref2$nodes.header,
-        defaultNodes = _ref2$nodes.default,
-        footer = _ref2$nodes.footer,
-        root = _ref2.root,
-        realList = _ref2.realList;
+  function ComponentStructure(_ref) {
+    var _ref$nodes = _ref.nodes,
+        header = _ref$nodes.header,
+        defaultNodes = _ref$nodes.default,
+        footer = _ref$nodes.footer,
+        root = _ref.root,
+        realList = _ref.realList;
 
     _classCallCheck(this, ComponentStructure);
 
@@ -4783,7 +4789,7 @@ var draggableComponent = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["d
   },
   created: function created() {
     if (this.list !== null && this.modelValue !== null) {
-      console["a" /* console */].error("modelValue and list props are mutually exclusive! Please set one or another.");
+      util_console["a" /* console */].error("modelValue and list props are mutually exclusive! Please set one or another.");
     }
   },
   mounted: function mounted() {
@@ -4884,6 +4890,7 @@ var draggableComponent = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["d
     spliceList: function spliceList() {
       var _arguments = arguments;
 
+      // @ts-ignore
       var spliceList = function spliceList(list) {
         return list.splice.apply(list, _toConsumableArray(_arguments));
       };
@@ -4937,7 +4944,8 @@ var draggableComponent = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["d
       }
 
       removeNode(evt.item);
-      var newIndex = this.getVmIndexFromDomIndex(evt.newIndex);
+      var newIndex = this.getVmIndexFromDomIndex(evt.newIndex); // @ts-ignore
+
       this.spliceList(newIndex, 0, element);
       var added = {
         element: element,
@@ -4958,7 +4966,8 @@ var draggableComponent = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["d
 
       var _this$context = this.context,
           oldIndex = _this$context.index,
-          element = _this$context.element;
+          element = _this$context.element; // @ts-ignore
+
       this.spliceList(oldIndex, 1);
       var removed = {
         element: element,
@@ -5162,4 +5171,4 @@ module.exports = NATIVE_SYMBOL
 /***/ })
 
 /******/ })["default"];
-//# sourceMappingURL=vuedraggable.common.js.map
+//# sourceMappingURL=vuedraggable.common.js.map

lib/vuedraggable/dist/vuedraggable.umd.js

@@ -1783,7 +1783,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
     if (descriptor && descriptor.get !== getCurrentScript && document.currentScript) {
       return document.currentScript
     }
-
+  
     // IE 8-10 support script readyState
     // IE 11+ & Firefox support stack trace
     try {
@@ -1801,24 +1801,24 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
         inlineScriptSourceRegExp,
         inlineScriptSource,
         scripts = document.getElementsByTagName('script'); // Live NodeList collection
-
+  
       if (scriptLocation === currentLocation) {
         pageSource = document.documentElement.outerHTML;
         inlineScriptSourceRegExp = new RegExp('(?:[^\\n]+?\\n){0,' + (line - 2) + '}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*', 'i');
         inlineScriptSource = pageSource.replace(inlineScriptSourceRegExp, '$1').trim();
       }
-
+  
       for (var i = 0; i < scripts.length; i++) {
         // If ready state is interactive, return the script tag
         if (scripts[i].readyState === 'interactive') {
           return scripts[i];
         }
-
+  
         // If src matches, return the script tag
         if (scripts[i].src === scriptLocation) {
           return scripts[i];
         }
-
+  
         // If inline source matches, return the script tag
         if (
           scriptLocation === currentLocation &&
@@ -1828,7 +1828,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
           return scripts[i];
         }
       }
-
+  
       // If no match, return null
       return null;
     }
@@ -4268,7 +4268,7 @@ function insertNodeAt(fatherNode, node, position) {
 
 
 // EXTERNAL MODULE: ./src/util/console.js
-var console = __webpack_require__("dbf1");
+var util_console = __webpack_require__("dbf1");
 
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.reduce.js
 var es_array_reduce = __webpack_require__("13d5");
@@ -4469,9 +4469,15 @@ function _createClass(Constructor, protoProps, staticProps) {
 
 
 
-var getHtmlElementFromNode = function getHtmlElementFromNode(_ref) {
-  var el = _ref.el;
-  return el;
+//const getHtmlElementFromNode = ({ el }) => el;
+var getHtmlElementFromNode = function getHtmlElementFromNode(node) {
+  var el = node.el || Array.isArray(node.children) && node.children[0].el.parentNode;
+
+  if (!el) {
+    console.error("使用 transition-group , 需要在slot中template内至少2层html标签");
+  }
+
+  return el || {};
 };
 
 var addContext = function addContext(domElement, context) {
@@ -4483,13 +4489,13 @@ var getContext = function getContext(domElement) {
 };
 
 var componentStructure_ComponentStructure = /*#__PURE__*/function () {
-  function ComponentStructure(_ref2) {
-    var _ref2$nodes = _ref2.nodes,
-        header = _ref2$nodes.header,
-        defaultNodes = _ref2$nodes.default,
-        footer = _ref2$nodes.footer,
-        root = _ref2.root,
-        realList = _ref2.realList;
+  function ComponentStructure(_ref) {
+    var _ref$nodes = _ref.nodes,
+        header = _ref$nodes.header,
+        defaultNodes = _ref$nodes.default,
+        footer = _ref$nodes.footer,
+        root = _ref.root,
+        realList = _ref.realList;
 
     _classCallCheck(this, ComponentStructure);
 
@@ -4792,7 +4798,7 @@ var draggableComponent = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["d
   },
   created: function created() {
     if (this.list !== null && this.modelValue !== null) {
-      console["a" /* console */].error("modelValue and list props are mutually exclusive! Please set one or another.");
+      util_console["a" /* console */].error("modelValue and list props are mutually exclusive! Please set one or another.");
     }
   },
   mounted: function mounted() {
@@ -4893,6 +4899,7 @@ var draggableComponent = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["d
     spliceList: function spliceList() {
       var _arguments = arguments;
 
+      // @ts-ignore
       var spliceList = function spliceList(list) {
         return list.splice.apply(list, _toConsumableArray(_arguments));
       };
@@ -4946,7 +4953,8 @@ var draggableComponent = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["d
       }
 
       removeNode(evt.item);
-      var newIndex = this.getVmIndexFromDomIndex(evt.newIndex);
+      var newIndex = this.getVmIndexFromDomIndex(evt.newIndex); // @ts-ignore
+
       this.spliceList(newIndex, 0, element);
       var added = {
         element: element,
@@ -4967,7 +4975,8 @@ var draggableComponent = Object(external_commonjs_vue_commonjs2_vue_root_Vue_["d
 
       var _this$context = this.context,
           oldIndex = _this$context.index,
-          element = _this$context.element;
+          element = _this$context.element; // @ts-ignore
+
       this.spliceList(oldIndex, 1);
       var removed = {
         element: element,
@@ -5172,4 +5181,4 @@ module.exports = NATIVE_SYMBOL
 
 /******/ })["default"];
 });
-//# sourceMappingURL=vuedraggable.umd.js.map
+//# sourceMappingURL=vuedraggable.umd.js.map

package.json

@@ -18,7 +18,7 @@
     "file-saver": "^2.0.5",
     "mitt": "^3.0.0",
     "sortablejs": "1.14.0",
-    "vue": "3.2.26",
+    "vue": "^3.2.32",
     "vue3-quill": "^0.2.6"
   },
   "devDependencies": {

src/components/form-designer/form-widget/index.vue

@@ -13,14 +13,16 @@
                    tag="transition-group" :component-data="{name: 'fade'}"
                    handle=".drag-handler" @end="onDragEnd" @add="onDragAdd" @update="onDragUpdate" :move="checkMove">
           <template #item="{ element: widget, index }">
-            <template v-if="'container' === widget.category">
-              <component :is="getWidgetName(widget)" :widget="widget" :designer="designer" :key="widget.id" :parent-list="designer.widgetList"
-                                :index-of-parent-list="index" :parent-widget="null"></component>
-            </template>
-            <template v-else>
-              <component :is="getWidgetName(widget)" :field="widget" :designer="designer" :key="widget.id" :parent-list="designer.widgetList"
-                            :index-of-parent-list="index" :parent-widget="null" :design-state="true"></component>
-            </template>
+            <div class="transition-group-el">
+              <template v-if="'container' === widget.category">
+                <component :is="getWidgetName(widget)" :widget="widget" :designer="designer" :key="widget.id" :parent-list="designer.widgetList"
+                                  :index-of-parent-list="index" :parent-widget="null"></component>
+              </template>
+              <template v-else>
+                <component :is="getWidgetName(widget)" :field="widget" :designer="designer" :key="widget.id" :parent-list="designer.widgetList"
+                              :index-of-parent-list="index" :parent-widget="null" :design-state="true"></component>
+              </template>
+            </div>
           </template>
         </draggable>
       </div>

src/utils/code-generator.js

@@ -16,9 +16,9 @@ export const generateCode = function(formJson, codeType= 'vue') {
 <body>
 
   <div id="app">
-	  <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
+    <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
     </v-form-render>
-	  <el-button type="primary" @click="submitForm">Submit</el-button>
+    <el-button type="primary" @click="submitForm">Submit</el-button>
   </div>
 
 <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.30/vue.global.min.js"></script>