Comments (8)
@xialiao Yes, you are right. I used TouchEvent
just for mobile phones and its definition is not supported by FF and Safari. I realized that mistake, so I removed the definition in v1.0.5.
@bodom0015 please use v1.0.5, It should work in FF and Safari. : )
from angular2-draggable.
We had similar issue with Firefox and Safari when using this package. We did a little research and realized Firefox and Safari at the time did not support TouchEvent, see Browser Compatibility at https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent.
from angular2-draggable.
Hi, @xialiao! This is Mike Lambert from the KnowEnG project! :D
I was just raising this issue with the package developer to see if they recognized the error, or could offer any insight.
from angular2-draggable.
I'm experiencing the same issue with IE 11, I am just testing the demo, it works with Chrome but not in IE.
from angular2-draggable.
@laps1967 I used window.getComputedStyle
in my code. It's not working in IE 11 as I expected. I should work out another solution for this.
EDIT: Please update to v1.0.5, it now supports IE 11.
@bodom0015 I think the error for the TouchEvent
is another issue. Did you use .umd
bundle or not?
from angular2-draggable.
thank you so much xieziyu, I see the demo is now working for me in IE 11, I will get the latest version and will try this in my project, very excited about this new feature :)
from angular2-draggable.
Yes, I followed the instructions here: https://www.npmjs.com/package/angular2-draggable
Using "angular2-draggable": "1.0.4"
, my systemjs.config.js
is as follows:
(function(global) {
System.config({
warnings: true,
paths: {
'npm:': 'node_modules/',
'systemjs': 'node_modules/systemjs/dist/system.js',
'system-polyfills': 'node_modules/systemjs/dist/system-polyfills.js',
'es-module-loader': 'node_modules/es6-module-loader/dist/es-module-loader.js',
'traceur': 'node_modules/traceur/bin/traceur-runtime.js',
},
map: {
'dist': 'dist',
'src': 'src',
'angular2-jwt': 'npm:angular2-jwt/angular2-jwt.js',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'file-saver': 'npm:file-saver/FileSaver.min.js',
'rxjs': 'npm:rxjs',
'moment': 'npm:moment/moment.js',
'ngx-bootstrap': 'npm:ngx-bootstrap/bundles/ngx-bootstrap.umd.js',
'ng2-slimscroll': 'npm:ng2-slimscroll/bundles/ng2-slimscroll.umd.js',
'ng2-file-upload': 'npm:ng2-file-upload/bundles/ng2-file-upload.umd.js',
'angular2-draggable': 'npm:angular2-draggable',
crypto: '@empty'
},
packages: {
// TypeScript source
'src': {
defaultExtension: 'ts'
},
// Transpiled JavaScript
'dist': {
defaultExtension: 'js'
},
'rxjs': {
defaultExtension: 'js'
},
'file-saver': {
format: "cjs"
},
'moment': {
defaultExtension: 'js'
},
'ngx-bootstrap': {
defaultExtension: 'js'
},
'ng2-slimscroll': {
defaultExtension: 'js'
},
'ng2-file-upload': {
defaultExtension: 'js'
},
'angular2-draggable': {
defaultExtension: 'js',
main: 'bundles/angular2-draggable.umd.min.js'
}
}
})
})(this);
Then, in my module:
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {AngularDraggableModule} from 'angular2-draggable';
import {Footer} from './Footer';
import {TagEditorModal} from './TagEditorModal';
import {TextboxEditorModal} from './TextboxEditorModal';
import {MyModal} from './MyModal';
import {MyOtherModal} from './MyOtherModal';
@NgModule({
imports: [CommonModule, FormsModule, AngularDraggableModule],
declarations: [Footer, TagEditorModal, TextboxEditorModal, MyModal, MyOtherModal],
exports: [Footer, TagEditorModal, TextboxEditorModal, MyModal, MyOtherModal]
})
export class MyTestModule { }
And in my component template(s):
<div class="my-modal" ngDraggable>
Modal content
</div>
Does the above configuration seem correct to you?
from angular2-draggable.
Awesome, that totally fixed it! Thank you so much for the help!! :D
Closing this issue
from angular2-draggable.
Related Issues (20)
- click event eaten by title attribute, when draggable
- Overlapping Draggable Element
- Draggable action for parent and child element
- click is not called only at first
- scaled parent bug on resizable HOT 2
- Drag and drop items using the library
- Angular10 support HOT 1
- Move with arrow keys feature
- Issue with ngDraggable boundsCheck() if out of bounds.
- Swapping elements
- my drag not showing resize handle HOT 2
- Draggable/Resizeable element moves off the position in Angular 10+
- [Easy] If position values are strings, draggable behavior is erratic
- Set movingOffset progmatically
- rzMaxHeight not working properly
- rzAspectRatio does not work on dynamically added div
- New Feature of showing smart guides and multiple drag
- New event rzBeforeStart is required
- Handle Size disrupting the element size when it has to be exact
- resizeable's w only style error HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular2-draggable.