Giter Club home page Giter Club logo

Comments (8)

xieziyu avatar xieziyu commented on May 25, 2024 2

@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.

xialiao avatar xialiao commented on May 25, 2024 1

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.

bodom0015 avatar bodom0015 commented on May 25, 2024 1

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.

laps1967 avatar laps1967 commented on May 25, 2024

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.

xieziyu avatar xieziyu commented on May 25, 2024

@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.

laps1967 avatar laps1967 commented on May 25, 2024

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.

bodom0015 avatar bodom0015 commented on May 25, 2024

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.

bodom0015 avatar bodom0015 commented on May 25, 2024

Awesome, that totally fixed it! Thank you so much for the help!! :D

Closing this issue

from angular2-draggable.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.