Added drag handles.

src/Squidex/app/features/content/shared/assets-editor.component.html

@@ -37,7 +37,7 @@
                     [isListView]="true" (failed)="removeLoadingAsset(file)" (loaded)="addAsset(file, $event)">
                 </sqx-asset>
                 
-                <div [sqxSortModel]="oldAssets.values" (sqxSorted)="sortAssets($event)">
+                <div [sqxSortModel]="oldAssets.values" (sqxSorted)="sortAssets($event)" dragHandle=".drag-handle">
                     <div *ngFor="let asset of oldAssets">
                         <sqx-asset [asset]="asset" removeMode="true" isDisabled="true"
                             [isListView]="true" (removing)="removeLoadedAsset($event)">

src/Squidex/app/features/content/shared/content-item.component.html

@@ -5,6 +5,10 @@
         (click)="$event.stopPropagation()" />
 </td>
 
+<td class="cell-select" *ngIf="isReference" (click)="shouldStop($event)">
+    <i class="icon-drag2 drag-handle"></i>
+</td>
+
 <td class="cell-auto" *ngFor="let field of schema.listFields; let i = index" (click)="shouldStop($event)">
     <div *ngIf="field.isInlineEditable && !isReadOnly" [formGroup]="patchForm.form" (click)="$event.stopPropagation()">
         <div [ngSwitch]="field.properties.fieldType">

src/Squidex/app/features/content/shared/references-editor.component.html

@@ -8,7 +8,8 @@
         
         <table class="table table-items table-fixed" [class.disabled]="isDisabled" *ngIf="schema && contentItems && contentItems.length > 0"
             [sqxSortModel]="contentItems.values" 
-            (sqxSorted)="sort($event)">
+            (sqxSorted)="sort($event)"
+            dragHandle=".drag-handle">
             <tbody *ngFor="let content of contentItems">
                 <tr [sqxContent]="content"
                     [language]="language"

src/Squidex/app/features/schemas/pages/schema/field.component.html

@@ -1,5 +1,7 @@
 <div class="table-items-row table-items-row-expandable field"> 
-    <div class="table-items-row-summary">        
+    <div class="table-items-row-summary">       
+        <i class="icon-drag2 drag-handle"></i>
+
         <div class="row">
             <div class="col-6">
                 <span class="field-name">
@@ -105,7 +107,7 @@
         <ng-container *ngIf="field['nested']; let nested">
             <span class="nested-field-line-v"></span>
 
-            <div [sqxSortModel]="nested" (sqxSorted)="sortFields($event)">
+            <div [sqxSortModel]="nested" (sqxSorted)="sortFields($event)" dragHandle=".drag-handle">
                 <div class="nested-field" *ngFor="let nested of nested; trackBy: trackByField">
                     <span class="nested-field-line-h"></span>
     

src/Squidex/app/features/schemas/pages/schema/field.component.scss

@@ -16,6 +16,15 @@ $padding: 1rem;
     }
 }
 
+.table-items-row-summary {
+    position: relative;
+    padding-left: 3rem;
+}
+
+.drag-handle {
+    @include absolute(1.75rem, auto, auto, .75rem);
+}
+
 .col {
     &-tags,
     &-options {

src/Squidex/app/features/schemas/pages/schema/schema-page.component.html

@@ -60,7 +60,7 @@
         </div>
 
         <ng-container *ngIf="patternsState.patterns | async; let patterns">
-            <div class="schemas" [sqxSortModel]="schema.fields" (sqxSorted)="sortFields($event)">
+            <div class="schemas" [sqxSortModel]="schema.fields" (sqxSorted)="sortFields($event)" dragHandle=".drag-handle">
                 <div *ngFor="let field of schema.fields; trackBy: trackByField">
                     <sqx-field [field]="field" [schema]="schema" [patterns]="patterns"></sqx-field>
                 </div>

src/Squidex/app/shared/components/asset.component.html

@@ -88,10 +88,10 @@
     <div class="table-items-row" [class.selectable]="isSelectable" (click)="selected.emit(asset)" (sqxFileDrop)="updateFile($event)">
         <div class="left-border" [class.hidden]="!isSelectable" [class.selected]="isSelected" ></div>
 
-        <div *ngIf="asset && asset.isImage && progress === 0" class="image" [class.image-left]="!isSelectable" @fade>
+        <div *ngIf="asset && asset.isImage && progress === 0" class="image drag-handle" [class.image-left]="!isSelectable" @fade>
             <img [sqxImageSource]="asset | sqxAssetPreviewUrl" class="bg2" layoutKey="asset-small">
         </div>
-        <div *ngIf="asset && !asset.isImage && progress === 0" class="image image-padded" [class.image-left]="!isSelectable" @fade>
+        <div *ngIf="asset && !asset.isImage && progress === 0" class="image drag-handle image-padded" [class.image-left]="!isSelectable" @fade>
             <img class="icon" [attr.src]="asset | sqxFileIcon">
         </div>