fix #7 drag and drop on firefox

plantain-00 · Jun 20, 2017 · 00061f9 · 00061f9
1 parent 8663200
commit 00061f9
Show file tree

Hide file tree

Showing 18 changed files with 19 additions and 34 deletions.
diff --git a/demo/angular/index.bundle-917182cab67ddf21d084a1d005b45c28.js b/demo/angular/index.bundle-917182cab67ddf21d084a1d005b45c28.js
diff --git a/demo/angular/index.bundle-fd6b27f71bc418b1b272c4f4658e05fa.js b/demo/angular/index.bundle-fd6b27f71bc418b1b272c4f4658e05fa.js
diff --git a/demo/angular/index.html b/demo/angular/index.html
@@ -12,5 +12,5 @@
 </style>
 </head><body>
 <app></app>
-<script src="./index.bundle-917182cab67ddf21d084a1d005b45c28.js" crossOrigin="anonymous" integrity="sha256-gBDPEO1CuVKfgVoiVcGzeeiB/tK+qQf2t1sYziHuiss="></script>
+<script src="./index.bundle-fd6b27f71bc418b1b272c4f4658e05fa.js" crossOrigin="anonymous" integrity="sha256-oTy3SbC7PveSMSLQHmwNyo71bESCWK4fhV6SRoLxQP8="></script>
 </body></html>
diff --git a/demo/react/index.bundle-0308f8cce3ea93dd91f113d7956f6b7b.js b/demo/react/index.bundle-0308f8cce3ea93dd91f113d7956f6b7b.js
diff --git a/demo/react/index.bundle-fe248f0014a32fbe8fe6e8d992d4f8a5.js b/demo/react/index.bundle-fe248f0014a32fbe8fe6e8d992d4f8a5.js
diff --git a/demo/react/index.html b/demo/react/index.html
@@ -12,5 +12,5 @@
 </style>
 </head><body>
 <div id="container"></div>
-<script src="./index.bundle-0308f8cce3ea93dd91f113d7956f6b7b.js" crossOrigin="anonymous" integrity="sha256-1BRsalvnRQOW8PChzTErtpccal6K3zITUukxrtkLcEA="></script>
+<script src="./index.bundle-fe248f0014a32fbe8fe6e8d992d4f8a5.js" crossOrigin="anonymous" integrity="sha256-PET/JIvCXZ5b/iB7agM8tKnsl6WS/N7+SaV6B7a2di0="></script>
 </body></html>
diff --git a/demo/vue/index.bundle-14d09d5132423ca748e5508c5204aba8.js b/demo/vue/index.bundle-14d09d5132423ca748e5508c5204aba8.js
diff --git a/demo/vue/index.bundle-2f635900ebdab7a8686a0aff7f69f3d6.js b/demo/vue/index.bundle-2f635900ebdab7a8686a0aff7f69f3d6.js
diff --git a/demo/vue/index.html b/demo/vue/index.html
@@ -12,5 +12,5 @@
 </style>
 </head><body>
 <div id="container"></div>
-<script src="./index.bundle-14d09d5132423ca748e5508c5204aba8.js" crossOrigin="anonymous" integrity="sha256-ecT47UaT7T2js1MuW4SZGKFGzAH3raMn/R19H7T6OI8="></script>
+<script src="./index.bundle-2f635900ebdab7a8686a0aff7f69f3d6.js" crossOrigin="anonymous" integrity="sha256-lE+bc+jPGo7Mcd6gweORU1wEGexqpd9ZjV4A/63h9Hs="></script>
 </body></html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tree-component",
-  "version": "2.7.1",
+  "version": "2.7.2",
   "description": "A reactjs, angular and vuejs tree component.",
   "main": "index.js",
   "scripts": {

diff --git a/src/angular-tree.template.html b/src/angular-tree.template.html
@@ -1,6 +1,5 @@
 <div [class]="rootClassName" role="tree">
     <ul [class]="containerClassName" role="group"
-        (drag)="ondrag($event)"
         (dragstart)="ondragstart($event)"
         (dragend)="ondragend($event)"
         (dragover)="ondragover($event)"

diff --git a/src/angular-variables.ts b/src/angular-variables.ts
@@ -1,2 +1,2 @@
 export const srcAngularNodeTemplateHtml = `<li role="treeitem" [class]="nodeClassName"><i class="tree-icon tree-ocl" role="presentation" (click)="ontoggle()"></i><a [class]="anchorClassName" href="javascript:void(0)" [draggable]="draggable" (click)="onchange()" (dblclick)="ontoggle()" (mouseenter)="hover(true)" (mouseleave)="hover(false)" [attr.data-path]="pathString"><i *ngIf="checkbox" [class]="checkboxClassName" role="presentation"></i><i *ngIf="data.icon !== false" [class]="iconClassName" role="presentation"></i>{{data.text}}<span *ngIf="hasMarker" [class]="markerClassName">&#160;</span></a><ul *ngIf="data.children" role="group" class="tree-children"><node *ngFor="let child of data.children; let i = index" [data]="child" [last]="i === data.children.length - 1" [checkbox]="checkbox" [path]="geChildPath(i)" [draggable]="draggable" (toggle)="ontoggle($event)" (change)="onchange($event)"></node></ul></li>`;
-export const srcAngularTreeTemplateHtml = `<div [class]="rootClassName" role="tree"><ul [class]="containerClassName" role="group" (drag)="ondrag($event)" (dragstart)="ondragstart($event)" (dragend)="ondragend($event)" (dragover)="ondragover($event)" (dragenter)="ondragenter($event)" (dragleave)="ondragleave($event)" (drop)="ondrop($event)"><node *ngFor="let child of data; let i = index" [data]="child" [last]="i === data.length - 1" [checkbox]="checkbox" [path]="[i]" [draggable]="draggable" (toggle)="ontoggle($event)" (change)="onchange($event)"></node></ul></div>`;
+export const srcAngularTreeTemplateHtml = `<div [class]="rootClassName" role="tree"><ul [class]="containerClassName" role="group" (dragstart)="ondragstart($event)" (dragend)="ondragend($event)" (dragover)="ondragover($event)" (dragenter)="ondragenter($event)" (dragleave)="ondragleave($event)" (drop)="ondrop($event)"><node *ngFor="let child of data; let i = index" [data]="child" [last]="i === data.length - 1" [checkbox]="checkbox" [path]="[i]" [draggable]="draggable" (toggle)="ontoggle($event)" (change)="onchange($event)"></node></ul></div>`;
diff --git a/src/angular.ts b/src/angular.ts
@@ -130,20 +130,14 @@ export class TreeComponent {
     }
 
     canDrop(event: DragEvent) {
-        return this.draggable && (event.target as HTMLElement).dataset.path;
+        return this.draggable && event.target && (event.target as HTMLElement).dataset && (event.target as HTMLElement).dataset.path;
     }
     ontoggle(eventData: common.EventData) {
         this.toggle.emit(eventData);
     }
     onchange(eventData: common.EventData) {
         this.change.emit(eventData);
     }
-    ondrag(event: DragEvent) {
-        if (!this.draggable) {
-            return;
-        }
-        common.ondrag(event.pageY, this.dragTarget, this.dropTarget, this.data, this.dropAllowed);
-    }
     ondragstart(event: DragEvent) {
         if (!this.draggable) {
             return;
@@ -164,13 +158,15 @@ export class TreeComponent {
         if (!this.canDrop(event)) {
             return;
         }
+        common.ondrag(event.pageY, this.dragTarget, this.dropTarget, this.data, this.dropAllowed);
         event.preventDefault();
     }
     ondragenter(event: DragEvent) {
         if (!this.canDrop(event)) {
             return;
         }
         this.dropTarget = event.target as HTMLElement;
+        common.ondrag(event.pageY, this.dragTarget, this.dropTarget, this.data, this.dropAllowed);
     }
     ondragleave(event: DragEvent) {
         if (!this.canDrop(event)) {

diff --git a/src/react.tsx b/src/react.tsx
@@ -195,7 +195,6 @@ export class Tree extends React.PureComponent<{
             <div className={this.rootClassName} role="tree">
                 <ul className={this.containerClassName}
                     role="group"
-                    onDrag={eventData => this.ondrag(eventData)}
                     onDragStart={eventData => this.ondragstart(eventData)}
                     onDragEnd={eventData => this.ondragend(eventData)}
                     onDragOver={eventData => this.ondragover(eventData)}
@@ -216,7 +215,7 @@ export class Tree extends React.PureComponent<{
     }
 
     canDrop(event: React.DragEvent<HTMLElement>) {
-        return this.props.draggable && (event.target as HTMLElement).dataset.path;
+        return this.props.draggable && event.target && (event.target as HTMLElement).dataset && (event.target as HTMLElement).dataset.path;
     }
     ontoggle(eventData: common.EventData) {
         if (this.props.toggle) {
@@ -228,12 +227,6 @@ export class Tree extends React.PureComponent<{
             this.props.change(eventData);
         }
     }
-    ondrag(event: React.DragEvent<HTMLElement>) {
-        if (!this.props.draggable) {
-            return;
-        }
-        common.ondrag(event.pageY, this.dragTarget, this.dropTarget, this.props.data, this.props.dropAllowed, () => this.forceUpdate());
-    }
     ondragstart(event: React.DragEvent<HTMLElement>) {
         if (!this.props.draggable) {
             return;
@@ -256,6 +249,7 @@ export class Tree extends React.PureComponent<{
         if (!this.canDrop(event)) {
             return;
         }
+        common.ondrag(event.pageY, this.dragTarget, this.dropTarget, this.props.data, this.props.dropAllowed, () => this.forceUpdate());
         event.preventDefault();
     }
     ondragenter(event: React.DragEvent<HTMLElement>) {
@@ -264,6 +258,7 @@ export class Tree extends React.PureComponent<{
         }
         this.dropTarget = event.target as HTMLElement;
         this.setState({ dropTarget: this.dropTarget });
+        common.ondrag(event.pageY, this.dragTarget, this.dropTarget, this.props.data, this.props.dropAllowed, () => this.forceUpdate());
     }
     ondragleave(event: React.DragEvent<HTMLElement>) {
         if (!this.canDrop(event)) {

diff --git a/src/vue-tree.template.html b/src/vue-tree.template.html
@@ -1,6 +1,5 @@
 <div :class="rootClassName" role="tree">
     <ul :class="containerClassName" role="group"
-        @drag="ondrag($event)"
         @dragstart="ondragstart($event)"
         @dragend="ondragend($event)"
         @dragover="ondragover($event)"

diff --git a/src/vue-variables.ts b/src/vue-variables.ts
@@ -1,2 +1,2 @@
 export const srcVueNodeTemplateHtml = `<li role="treeitem" :class="nodeClassName"><i class="tree-icon tree-ocl" role="presentation" @click="ontoggle()"></i><a :class="anchorClassName" href="javascript:void(0)" :draggable="draggable" @click="onchange()" @dblclick="ontoggle()" @mouseenter="hover(true)" @mouseleave="hover(false)" @contextmenu="oncontextmenu($event)" :data-path="pathString"><i v-if="checkbox" :class="checkboxClassName" role="presentation"></i><i v-if="data.icon !== false" :class="iconClassName" role="presentation"></i>{{data.text}}<span v-if="hasMarker" :class="markerClassName">&#160;</span><div v-if="data.contextmenu && contextmenuVisible" :style="contextmenuStyle"><component :is="data.contextmenu" :data="contextmenuData"></component></div></a><ul v-if="data.children" role="group" class="tree-children"><node v-for="(child, i) in data.children" :data="child" :last="i === data.children.length - 1" :checkbox="checkbox" :path="geChildPath(i)" :draggable="draggable" :root="root" :zindex="zindex" @toggle="ontoggle($event)" @change="onchange($event)"></node></ul></li>`;
-export const srcVueTreeTemplateHtml = `<div :class="rootClassName" role="tree"><ul :class="containerClassName" role="group" @drag="ondrag($event)" @dragstart="ondragstart($event)" @dragend="ondragend($event)" @dragover="ondragover($event)" @dragenter="ondragenter($event)" @dragleave="ondragleave($event)" @drop="ondrop($event)"><node v-for="(child, i) in data" :data="child" :last="i === data.length - 1" :checkbox="checkbox" :path="[i]" :draggable="draggable" :root="data" :zindex="zindex" @toggle="ontoggle($event)" @change="onchange($event)"></node></ul></div>`;
+export const srcVueTreeTemplateHtml = `<div :class="rootClassName" role="tree"><ul :class="containerClassName" role="group" @dragstart="ondragstart($event)" @dragend="ondragend($event)" @dragover="ondragover($event)" @dragenter="ondragenter($event)" @dragleave="ondragleave($event)" @drop="ondrop($event)"><node v-for="(child, i) in data" :data="child" :last="i === data.length - 1" :checkbox="checkbox" :path="[i]" :draggable="draggable" :root="data" :zindex="zindex" @toggle="ontoggle($event)" @change="onchange($event)"></node></ul></div>`;
diff --git a/src/vue.ts b/src/vue.ts
@@ -136,20 +136,14 @@ export class Tree extends Vue {
     }
 
     canDrop(event: DragEvent) {
-        return this.draggable && (event.target as HTMLElement).dataset.path;
+        return this.draggable && event.target && (event.target as HTMLElement).dataset && (event.target as HTMLElement).dataset.path;
     }
     ontoggle(eventData: common.EventData) {
         this.$emit("toggle", eventData);
     }
     onchange(eventData: common.EventData) {
         this.$emit("change", eventData);
     }
-    ondrag(event: DragEvent) {
-        if (!this.draggable) {
-            return;
-        }
-        common.ondrag(event.pageY, this.dragTarget, this.dropTarget, this.data, this.dropAllowed);
-    }
     ondragstart(event: DragEvent) {
         if (!this.draggable) {
             return;
@@ -170,13 +164,15 @@ export class Tree extends Vue {
         if (!this.canDrop(event)) {
             return;
         }
+        common.ondrag(event.pageY, this.dragTarget, this.dropTarget, this.data, this.dropAllowed);
         event.preventDefault();
     }
     ondragenter(event: DragEvent) {
         if (!this.canDrop(event)) {
             return;
         }
         this.dropTarget = event.target as HTMLElement;
+        common.ondrag(event.pageY, this.dragTarget, this.dropTarget, this.data, this.dropAllowed);
     }
     ondragleave(event: DragEvent) {
         if (!this.canDrop(event)) {