Fixed #3043

primefaces · Jun 9, 2017 · 9486aab · 9486aab
1 parent 4c3d49e
commit 9486aab
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 5 deletions.
diff --git a/src/app/components/orderlist/orderlist.ts b/src/app/components/orderlist/orderlist.ts
@@ -1,4 +1,4 @@
-import {NgModule,Component,ElementRef,AfterViewChecked,AfterContentInit,Input,Output,ContentChildren,QueryList,TemplateRef,EventEmitter} from '@angular/core';
+import {NgModule,Component,ElementRef,AfterViewChecked,AfterContentInit,Input,Output,ContentChildren,QueryList,TemplateRef,EventEmitter,ViewChild} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {ButtonModule} from '../button/button';
 import {SharedModule,PrimeTemplate} from '../common/shared';
@@ -21,15 +21,15 @@ import {ObjectUtils} from '../utils/objectutils';
                     <input type="text" role="textbox" (keyup)="onFilterKeyup($event)" class="ui-inputtext ui-widget ui-state-default ui-corner-all" [disabled]="disabled" [attr.placeholder]="filterPlaceholder">
                     <span class="fa fa-search"></span>
                 </div>
-                <ul #listelement class="ui-widget-content ui-orderlist-list ui-corner-bottom" [ngStyle]="listStyle">
+                <ul #listelement class="ui-widget-content ui-orderlist-list ui-corner-bottom" [ngStyle]="listStyle" (dragover)="onListMouseMove($event)">
                     <ng-template ngFor let-item [ngForOf]="value" let-i="index" let-l="last">
                         <li class="ui-orderlist-droppoint" *ngIf="dragdrop" (dragover)="onDragOver($event, i)" (drop)="onDrop($event, i)" (dragleave)="onDragLeave($event)" 
                             [ngClass]="{'ui-state-highlight': (i === dragOverItemIndex)}"></li>
                         <li class="ui-orderlist-item"
                             [ngClass]="{'ui-state-highlight':isSelected(item)}" 
                             (click)="onItemClick($event,item)" (touchend)="onItemTouchEnd($event)"
                             [style.display]="isItemVisible(item) ? 'block' : 'none'"
-                            [draggable]="dragdrop" (dragstart)="onDragStart($event, i)">
+                            [draggable]="dragdrop" (dragstart)="onDragStart($event, i)" (dragend)="onDragEnd($event)">
                             <ng-template [pTemplateWrapper]="itemTemplate" [item]="item"></ng-template>
                         </li>
                         <li class="ui-orderlist-droppoint" *ngIf="dragdrop&&l" (dragover)="onDragOver($event, i + 1)" (drop)="onDrop($event, i + 1)" (dragleave)="onDragLeave($event)" 
@@ -69,6 +69,8 @@ export class OrderList implements AfterViewChecked,AfterContentInit {
 
     @Output() onFilterEvent: EventEmitter<any> = new EventEmitter();
 
+    @ViewChild('listelement') listViewChild: ElementRef;
+
     @ContentChildren(PrimeTemplate) templates: QueryList<any>;
 
     public itemTemplate: TemplateRef<any>;
@@ -87,6 +89,8 @@ export class OrderList implements AfterViewChecked,AfterContentInit {
 
     dragOverItemIndex: number;
 
+    dragging: boolean;
+
     public filterValue: string;
 
     public visibleOptions: any[];
@@ -307,14 +311,14 @@ export class OrderList implements AfterViewChecked,AfterContentInit {
     }
 
     onDragStart(event: DragEvent, index: number) {
+        this.dragging = true;
         this.draggedItemIndex = index;
         if(this.dragdropScope) {
             event.dataTransfer.setData("text", this.dragdropScope);
         }
     }
 
     onDragOver(event: DragEvent, index: number) {
-        console.log(index);
         if(this.draggedItemIndex !== index && this.draggedItemIndex + 1 !== index) {
             this.dragOverItemIndex = index;
             event.preventDefault();
@@ -329,6 +333,22 @@ export class OrderList implements AfterViewChecked,AfterContentInit {
         this.objectUtils.reorderArray(this.value, this.draggedItemIndex, index - 1);
         this.dragOverItemIndex = null;
     }
+
+    onDragEnd(event: DragEvent) {
+        this.dragging = false;
+    }
+
+    onListMouseMove(event: MouseEvent) {
+        if(this.dragging) {
+            let offsetY = this.listViewChild.nativeElement.getBoundingClientRect().top + document.body.scrollTop;
+            let bottomDiff = (offsetY + this.listViewChild.nativeElement.clientHeight) - event.pageY;
+            let topDiff = (event.pageY - offsetY);
+            if(bottomDiff < 25 && bottomDiff > 0)
+                this.listViewChild.nativeElement.scrollTop += 15;
+            else if(topDiff < 25 && topDiff > 0)
+                this.listViewChild.nativeElement.scrollTop -= 15;
+        }
+    }
 }
 
 @NgModule({

diff --git a/src/app/showcase/components/orderlist/orderlistdemo.html b/src/app/showcase/components/orderlist/orderlistdemo.html
@@ -75,6 +75,14 @@ <h3>Filtering</h3>
 <code class="language-markup" pCode ngNonBindable>
 &lt;p-orderlist [value]="cars" filterBy="brand,color,address.city"&gt;&lt;/p-orderlist&gt;
 </code>
+</pre>
+
+            <h3>DragDrop</h3>
+            <p>Items can be reordered using drag and drop by enabling dragdrop property along with dragdropScope to avoid conflict with other drag drop events on view.</p>
+<pre>
+<code class="language-markup" pCode ngNonBindable>
+&lt;p-orderList [value]="cars" dragdrop="true" dragdropScope="cars"&gt;
+</code>
 </pre>
 
             <h3>Responsive</h3>
@@ -146,6 +154,18 @@ <h3>Properties</h3>
                             <td>When true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item
                             can be toggled individually. On touch enabled devices, metaKeySelection is turned off automatically.</td>
                         </tr>
+                        <tr>
+                            <td>dragdrop</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>Whether to enable dragdrop based reordering.</td>
+                        </tr>
+                        <tr>
+                            <td>dragdropScope</td>
+                            <td>string</td>
+                            <td>null</td>
+                            <td>Unique key of drag drop events to avoid conflict with other drag drop events on the page.</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>
@@ -216,7 +236,8 @@ <h3>Dependencies</h3>
         <p-tabPanel header="Source">
 <pre>
 <code class="language-markup" pCode ngNonBindable>
-&lt;p-orderList [value]="cars" [listStyle]="&#123;'height':'250px'&#125;" [responsive]="true" header="Cars" filter="filter" filterBy="brand" filterPlaceholder="Filter by brand"&gt;
+&lt;p-orderList [value]="cars" [listStyle]="&#123;'height':'250px'&#125;" [responsive]="true" header="Cars" 
+    filter="filter" filterBy="brand" filterPlaceholder="Filter by brand" dragdrop="true"&gt;
     &lt;ng-template let-car pTemplate="item"&gt;
         &lt;div class="ui-helper-clearfix"&gt;
             &lt;img src="assets/showcase/images/demo/car/{{car.brand}}.gif" style="display:inline-block;margin:2px 0 2px 2px" /&gt;