Dragging

From WebOS101

Contents 1 Introduction 2 Mojo 3 DOM Events 3.1 Sample Code 4 Useful Resources

Introduction

There are (at least) two methods of handling dragging: Mojo events and the standard HTML DOM events.

Mojo

Mojo offers a number of dragging events that can be useful for implementing your own custom dragging stuff. By default, the scroller gets them; if you handle them, however, the OS will continue delivering them to the same DOM node until the drag ends.

Those events are:

• Mojo.Event.dragStart
• Mojo.Event.dragging
• Mojo.Event.dragEnd

The most useful thing to know about those is that the event parameter to the handler function will have a .move property that encapsulates information about the dragging motion. You can extract the X and Y coordinates of the current position of the finger as follows:

function handleDragging(e) {
  var x = Event.pointerX(e.move), y = Event.pointerY(e.move);
  /* ... */
}

DOM Events

You can use the standard DOM events as well. There are a lot of tutorials on the internet that discuss dragging. Those concepts will work on webOS devices as well. The events you'll be interested in are:

• mousedown
• mousemove
• mouseup

Sample Code

This is a very simple example that shows how you might listen to the various events. See the useful resources below for some better code.

<div id="dragger" style="width:200px;height:200px;position:absolute;z-index:10;background-color:rgba(167,210,134,0.5)"></div>

//BEGIN SETUP
MyAssistant.prototype.setup = function() {
        this.dragStartHandler = this.dragStartHandler.bindAsEventListener(this);
        this.draggingHandler = this.draggingHandler.bindAsEventListener(this);
        this.dragStopHandler = this.dragStopHandler.bindAsEventListener(this);
        this.controller.get("dragger").observe('mousedown', this.dragStartHandler);
        document.observe('mousemove', this.draggingHandler);
        document.observe('mouseup', this.dragStopHandler);
 
}//END SETUP
 
MyAssistant.prototype.dragStartHandler = function(event)
    {
        this.inDrag = true;
        this.dragX = event.clientX + window.scrollX;
        this.dragY = event.clientY + window.scrollY;
        event.stop();
    };
 
MyAssistant.prototype.draggingHandler = function(event)
    {
        if(this.inDrag)
        {
            var x, y;
            x = event.clientX + window.scrollX;
            y = event.clientY + window.scrollY;
            this.controller.get("dragger").style.left = x + "px";
            this.controller.get("dragger").style.top = y + "px";
        }
    };
 
MyAssistant.prototype.dragStopHandler = function(event)
    {
        this.inDrag = false;
    };

Useful Resources

• JavaScript Draggable Elements