Class: MovableCoord

Extends

• eg.Component

Members

static,constanteg.MovableCoord.DIRECTION_ALLNumber

static,constanteg.MovableCoord.DIRECTION_DOWNNumber

static,constanteg.MovableCoord.DIRECTION_HORIZONTALNumber

static,constanteg.MovableCoord.DIRECTION_LEFTNumber

static,constanteg.MovableCoord.DIRECTION_NONENumber

static,constanteg.MovableCoord.DIRECTION_RIGHTNumber

static,constanteg.MovableCoord.DIRECTION_UPNumber

static,constanteg.MovableCoord.DIRECTION_VERTICALNumber

Methods

bind(element, options){eg.MovableCoord}

movableCoord.js, line 92

Registers an element to use the eg.MovableCoord module.

eg.MovableCoord 모듈을 사용할 엘리먼트를 등록한다

• element
  Type: HTMLElement | String | jQuery

  An element to use the eg.MovableCoord module

  − eg.MovableCoord 모듈을 사용할 엘리먼트

• options
  Type: Object

  The option object of the bind() method

  bind() 메서드의 옵션 객체

  • direction (default: eg.MovableCoord.DIRECTION_ALL) optional
    Type: Number

    Coordinate direction that a user can move
    - eg.MovableCoord.DIRECTION_ALL: All directions available.
    - eg.MovableCoord.DIRECTION_HORIZONTAL: Horizontal direction only.
    - eg.MovableCoord.DIRECTION_VERTICAL: Vertical direction only

    사용자의 동작으로 움직일 수 있는 좌표의 방향.
    - eg.MovableCoord.DIRECTION_ALL: 모든 방향으로 움직일 수 있다.
    - eg.MovableCoord.DIRECTION_HORIZONTAL: 가로 방향으로만 움직일 수 있다.
    - eg.MovableCoord.DIRECTION_VERTICAL: 세로 방향으로만 움직일 수 있다.

  • scale
    Type: Array

    Coordinate scale that a user can move

    사용자의 동작으로 이동하는 좌표의 배율

    • 0 (default: 1) optional
      Type: Number

      X-axis scale

      x축 배율

    • 1 (default: 1) optional
      Type: Number

      Y-axis scale

      y축 배율

  • thresholdAngle (default: 45) optional
    Type: Number

    The threshold value that determines whether user action is horizontal or vertical (0~90)

    사용자의 동작이 가로 방향인지 세로 방향인지 판단하는 기준 각도(0~90)

  • interruptable (default: true) optional
    Type: Number

    Indicates whether an animation is interruptible.
    - true: It can be paused or stopped by user action or the API.
    - false: It cannot be paused or stopped by user action or the API while it is running.

    진행 중인 애니메이션 중지 가능 여부.
    - true: 사용자의 동작이나 API로 애니메이션을 중지할 수 있다.
    - false: 애니메이션이 진행 중일 때는 사용자의 동작이나 API가 적용되지 않는다

  • inputType optional
    Type: Array

    Types of input devices. (default: ["touch", "mouse"])
    - touch: Touch screen
    - mouse: Mouse

    입력 장치 종류.(기본값: ["touch", "mouse"])
    - touch: 터치 입력 장치
    - mouse: 마우스

Returns:

Type	Description
eg.MovableCoord	An instance of a module itself 모듈 자신의 인스턴스

destroy()

movableCoord.js, line 854

Destroys elements, properties, and events used in a module.

모듈에 사용한 엘리먼트와 속성, 이벤트를 해제한다.

disableInput(element){eg.MovableCoord}

movableCoord.js, line 830

Disables input devices

입력 장치를 사용할 수 없게 한다.

• element optional
  Type: HTMLElement | String | jQuery

  An element from which the eg.MovableCoord module is using (if the element parameter is not present, it applies to all binded elements)<

  eg.MovableCoord 모듈을 사용하는 엘리먼트 (element 파라미터가 존재하지 않을 경우, 바인드된 모든 엘리먼트에 적용된다)

Returns:

Type	Description
eg.MovableCoord	An instance of a module itself 자신의 인스턴스

enableInput(element){eg.MovableCoord}

movableCoord.js, line 819

Enables input devices

입력 장치를 사용할 수 있게 한다

• element optional
  Type: HTMLElement | String | jQuery

  An element from which the eg.MovableCoord module is using (if the element parameter is not present, it applies to all binded elements)

  eg.MovableCoord 모듈을 사용하는 엘리먼트 (element 파라미터가 존재하지 않을 경우, 바인드된 모든 엘리먼트에 적용된다)

Returns:

Type	Description
eg.MovableCoord	An instance of a module itself 자신의 인스턴스

get(){Array}

movableCoord.js, line 728

Returns the current position of the logical coordinates.

논리적 좌표의 현재 위치를 반환한다

Returns:

Name	Type	Description
pos	Array	좌표 Name Type Description 0 Number The X coordinate x 좌표 1 Number The Y coordinate y 좌표

getHammer(element){Hammer|null}

movableCoord.js, line 224

get a hammer instance from elements using the eg.MovableCoord module.

eg.MovableCoord 모듈을 사용하는 엘리먼트에서 hammer 객체를 얻는다

• element
  Type: HTMLElement | String | jQuery

  An element from which the eg.MovableCoord module is using

  eg.MovableCoord 모듈을 사용하는 엘리먼트

Returns:

Type	Description
Hammer | null	An instance of Hammer.JS Hammer.JS의 인스턴스

inherited hasOn(eventName){Boolean}

component.js, line 165

Checks whether an event has been attached to a component.

컴포넌트에 이벤트가 등록됐는지 확인한다.

• eventName
  Type: String

  The name of the event to be attached

  등록 여부를 확인할 이벤트의 이름

Returns:

Type	Description
Boolean	Indicates whether the event is attached. 이벤트 등록 여부

Example

        var Some = eg.Class.extend(eg.Component,{
            "some": function(){
                this.hasOn("hi");// check hi event.
            }
        });

inherited off(eventName, handlerToDetach){eg.Component}

component.js, line 218

Detaches an event from the component.

컴포넌트에 등록된 이벤트를 해제한다

• eventName
  Type: eventName

  The name of the event to be detached

  해제할 이벤트의 이름

• handlerToDetach
  Type: function

  The handler function of the event to be detached

  해제할 이벤트의 핸들러 함수

Returns:

Type	Description
eg.Component	An instance of a component itself 컴포넌트 자신의 인스턴스

Example

        var Some = eg.Class.extend(eg.Component,{
            "hi": function(){},
            "some": function(){
                this.off("hi",this.hi); //detach event
            }
        });

inherited on(eventName, handlerToAttach){eg.Component}

component.js, line 181

Attaches an event to a component.

컴포넌트에 이벤트를 등록한다.

• eventName
  Type: eventName

  The name of the event to be attached

  등록할 이벤트의 이름

• handlerToAttach
  Type: function

  The handler function of the event to be attached

  등록할 이벤트의 핸들러 함수

Returns:

Type	Description
eg.Component	An instance of a component itself 컴포넌트 자신의 인스턴스

Example

        var Some = eg.Class.extend(eg.Component,{
            "hi": function(){},
            "some": function(){
                this.on("hi",this.hi); //attach event
            }
        });

inherited once(eventName, handlerToAttach){eg.Component}

component.js, line 120

Executed event just one time.

이벤트가 한번만 실행된다.

• eventName
  Type: eventName

  The name of the event to be attached

  등록할 이벤트의 이름

• handlerToAttach
  Type: function

  The handler function of the event to be attached

  등록할 이벤트의 핸들러 함수

Returns:

Type	Description
eg.Component	An instance of a component itself 컴포넌트 자신의 인스턴스

Example

        var Some = eg.Class.extend(eg.Component,{
            "hi": function(){
                alert("hi");
            },
            "thing": function(){
                this.once("hi",this.hi);
            }
        });

        var some = new Some();
        some.thing();
        some.trigger("hi");
        // fire alert("hi");
        some.trigger("hi");
        // Nothing happens

inherited option(key, value){eg.Component|Object}

component.js, line 25

Sets options in a component or returns them.

컴포넌트에 옵션을 설정하거나 옵션을 반환한다

• key
  Type: String

  The key of the option

  옵션의 키

• value optional
  Type: Object

  The option value that corresponds to a given key

  키에 해당하는 옵션값

Returns:

Type

Description

eg.Component | Object

An instance, an option value, or an option object of a component itself. - If both key and value are used to set an option, it returns an instance of a component itself. - If only a key is specified for the parameter, it returns the option value corresponding to a given key. - If nothing is specified, it returns an option object. 컴포넌트 자신의 인스턴스나 옵션값, 옵션 객체. - 키와 값으로 옵션을 설정하면 컴포넌트 자신의 인스턴스를 반환한다. - 파라미터에 키만 설정하면 키에 해당하는 옵션값을 반환한다. - 파라미터에 아무것도 설정하지 않으면 옵션 객체를 반환한다.

Example

        var Some = eg.Class.extend(eg.Component, {
            construct: function(options){
                this.options = options; // You have to set this.options.
            }
        });

        var some = new Some({
            "foo": 1,
            "bar": 2,
        });
        some.option("foo"); // return 1
        some.option("foo",3); // return some instance
        some.option(); // return options object.
        some.option({
            "foo" : 10,
            "bar" : 20,
            "baz" : 30
        }); // return some instance.

setBy(x, y, duration){eg.MovableCoord}

movableCoord.js, line 784

Moves an element from the current coordinates to specific coordinates. The change event is fired when the method is executed.

현재 좌표를 기준으로 좌표를 이동한다. 메서드가 실행되면 change 이벤트가 발생한다

• x
  Type: Number

  The X coordinate to move to

  이동할 x좌표

• y
  Type: Number

  The Y coordinate to move to

  이동할 y좌표

• duration (default: 0) optional
  Type: Number

  Duration of the animation (unit: ms)

  애니메이션 진행 시간(단위: ms)

Returns:

Type	Description
eg.MovableCoord	An instance of a module itself 자신의 인스턴스

setTo(x, y, duration){eg.MovableCoord}

movableCoord.js, line 740

Moves an element to specific coordinates.

좌표를 이동한다.

• x
  Type: Number

  The X coordinate to move to

  이동할 x좌표

• y
  Type: Number

  The Y coordinate to move to

  이동할 y좌표

• duration (default: 0) optional
  Type: Number

  Duration of the animation (unit: ms)

  애니메이션 진행 시간(단위: ms)

Returns:

Type	Description
eg.MovableCoord	An instance of a module itself 자신의 인스턴스

inherited trigger(eventName, customEvent){Boolean}

component.js, line 72

Triggers a custom event.

커스텀 이벤트를 발생시킨다

• eventName
  Type: String

  The name of the custom event to be triggered

  발생할 커스텀 이벤트의 이름

• customEvent
  Type: Object

  Event data to be sent when triggering a custom event

  커스텀 이벤트가 발생할 때 전달할 데이터

Returns:

Type	Description
Boolean	Indicates whether the event has occurred. If the stop() method is called by a custom event handler, it will return false and prevent the event from occurring. 이벤트 발생 여부. 커스텀 이벤트 핸들러에서 stop() 메서드를 호출하면 'false'를 반환하고 이벤트 발생을 중단한다.

Example

        var Some = eg.Class.extend(eg.Component,{
            "some": function(){
                this.trigger("hi");// fire hi event.
            }
        });

unbind(element){eg.MovableCoord}

movableCoord.js, line 206

Detaches an element using the eg.MovableCoord module.

eg.MovableCoord 모듈을 사용하는 엘리먼트를 해제한다

• element
  Type: HTMLElement | String | jQuery

  An element from which the eg.MovableCoord module is detached

  eg.MovableCoord 모듈을 해제할 엘리먼트

Returns:

Type	Description
eg.MovableCoord	An instance of a module itself 모듈 자신의 인스턴스

Events

animationEnd

movableCoord.js, line 604

This event is fired when animation ends.

에니메이션이 끝났을 때 발생한다.

change

movableCoord.js, line 706

This event is fired when coordinate changes.

좌표가 변경됐을 때 발생하는 이벤트

• param
  Type: Object

  The object of data to be sent when the event is fired

  이벤트가 발생할 때 전달되는 데이터 객체

  • pos
    Type: Array

    departure coordinate

    좌표

    • 0
      Type: Number

      The X coordinate

      x 좌표

    • 1
      Type: Number

      The Y coordinate

      y 좌표

  • holding
    Type: Boolean

    Indicates whether a user holds an element on the screen of the device.

    사용자가 기기의 화면을 누르고 있는지 여부

  • hammerEvent
    Type: Object

    The event information of Hammer.JS. It returns null if the event is fired through a call to the setTo() or setBy() method.

    Hammer.JS의 이벤트 정보. setTo() 메서드나 setBy() 메서드를 호출해 이벤트가 발생했을 때는 'null'을 반환한다.

hold

movableCoord.js, line 301

This event is fired when a user holds an element on the screen of the device.

사용자가 기기의 화면에 손을 대고 있을 때 발생하는 이벤트

• param
  Type: Object

  The object of data to be sent when the event is fired

  이벤트가 발생할 때 전달되는 데이터 객체

  • pos
    Type: Array

    coordinate

    좌표 정보

    • 0
      Type: Number

      The X coordinate

      x 좌표

    • 1
      Type: Number

      The Y coordinate

      y 좌표

  • hammerEvent
    Type: Object

    The event information of Hammer.JS. It returns null if the event is fired through a call to the setTo() or setBy() method.

    Hammer.JS의 이벤트 정보. setTo() 메서드나 setBy() 메서드를 호출해 이벤트가 발생했을 때는 'null'을 반환한다.

release

movableCoord.js, line 450

This event is fired when a user release an element on the screen of the device.

사용자가 기기의 화면에서 손을 뗐을 때 발생하는 이벤트

• param
  Type: Object

  The object of data to be sent when the event is fired

  이벤트가 발생할 때 전달되는 데이터 객체

  • depaPos
    Type: Array

    The coordinates when releasing an element

    손을 뗐을 때의 좌표현재

    • 0
      Type: Number

      The X coordinate

      x 좌표

    • 1
      Type: Number

      The Y coordinate

      y 좌표

  • destPos
    Type: Array

    The coordinates to move to after releasing an element

    손을 뗀 뒤에 이동할 좌표

    • 0
      Type: Number

      The X coordinate

      x 좌표

    • 1
      Type: Number

      The Y coordinate

      y 좌표

  • hammerEvent
    Type: Object

    The event information of Hammer.JS. It returns null if the event is fired through a call to the setTo() or setBy() method.

    Hammer.JS의 이벤트 정보. setTo() 메서드나 setBy() 메서드를 호출해 이벤트가 발생했을 때는 'null'을 반환한다