Allow drag rows into table wrapper (#10369)

* allow drag into table wrapper

* angular, vue and tests

* refactored and check if no rows

Author: novikov82

packages/survey-angular-ui/src/questions/matrixtable.component.html

@@ -1,4 +1,4 @@
-<div #contentElement [class]="question.cssClasses.tableWrapper">
+<div #contentElement [class]="question.cssClasses.tableWrapper" [attr.data-sv-drop-target-matrix-row]="question.renderedTable.wrapperDropTargetId">
   <table [class]="question.getTableCss()">
     <thead *ngIf="table.showHeader">
       <tr>

packages/survey-core/src/question_matrixdropdownrendered.ts

@@ -329,6 +329,9 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
   public set renderedRows(val: Array<QuestionMatrixDropdownRenderedRow>) {
     this.renderedRowsAnimation.sync(val);
   }
+  public get wrapperDropTargetId() {
+    return this.renderedRows[this.renderedRows.length - 1]?.dropTargetId;
+  }
 
   public constructor(public matrix: QuestionMatrixDropdownModelBase) {
     super();

packages/survey-react-ui/src/reactquestion_matrixdropdownbase.tsx

@@ -256,7 +256,7 @@ export class SurveyQuestionMatrixDropdownBase extends SurveyQuestionElementBase
   }
   renderTableDiv(): React.JSX.Element {
     return (
-      <div className={this.question.cssClasses.tableWrapper} ref={(root) => (this.setControl(root))}>
+      <div className={this.question.cssClasses.tableWrapper} data-sv-drop-target-matrix-row={this.question.renderedTable.wrapperDropTargetId} ref={(root) => (this.setControl(root))}>
         <SurveyQuestionMatrixTable question={this.question} creator={this.creator} wrapCell={(cell, element, reason) => this.wrapCell(cell, element, reason)}></SurveyQuestionMatrixTable>
       </div>
     );

packages/survey-vue3-ui/src/MatrixTable.vue

@@ -2,6 +2,7 @@
   <div
     :style="{ overflowX: question.showHorizontalScroll ? 'scroll' : '' as any }"
     :class="question.cssClasses.tableWrapper"
+    :data-sv-drop-target-matrix-row="question.renderedTable.wrapperDropTargetId"
   >
     <table :class="question.getTableCss()">
       <thead v-if="table.showHeader">

tests/markup/snapshots/martix-celltype-text-a11y.snap.html

@@ -1,4 +1,4 @@
-<div class="sd-table-wrapper">
+<div class="sd-table-wrapper" data-sv-drop-target-matrix-row="testid0row7">
 	<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
 		<thead>
 			<tr>

tests/markup/snapshots/matrixdropdown-cell-errors-top.snap.html

@@ -1,4 +1,4 @@
-<div class="sd-table-wrapper">
+<div class="sd-table-wrapper" data-sv-drop-target-matrix-row="testid0row1">
 	<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
 		<thead>
 			<tr>

tests/markup/snapshots/matrixdropdown-disabled.snap.html

@@ -1,4 +1,4 @@
-<div class="sd-table-wrapper">
+<div class="sd-table-wrapper" data-sv-drop-target-matrix-row="testid0row3">
 	<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
 		<thead>
 			<tr>

tests/markup/snapshots/matrixdropdown-hidden-question-mobile.snap.html

@@ -1,4 +1,4 @@
-<div class="sd-table-wrapper">
+<div class="sd-table-wrapper" data-sv-drop-target-matrix-row="testid0row1">
 	<table class="sd-matrixdropdown sd-table sd-table--align-middle">
 		<thead>
 			<tr>

tests/markup/snapshots/matrixdropdown-readonly.snap.html

@@ -1,4 +1,4 @@
-<div class="sd-table-wrapper">
+<div class="sd-table-wrapper" data-sv-drop-target-matrix-row="testid0row3">
 	<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
 		<thead>
 			<tr>

tests/markup/snapshots/matrixdropdown.snap.html

@@ -1,4 +1,4 @@
-<div class="sd-table-wrapper">
+<div class="sd-table-wrapper" data-sv-drop-target-matrix-row="testid0row3">
 	<table class="sd-matrixdropdown sd-table sd-table--align-middle sd-table--columnsautowidth">
 		<thead>
 			<tr>