Drag and drop

To implement drag and drop interaction, use the global startDrag() and stopDrag() methods. You can use these to drag MovieClips, Buttons, and other objects. Alternatively, you can use the dedicated MovieClip.startDrag() and MovieClip.stopDrag() methods for dragging MovieClips. The methods are supported since Flash Lite 2.0.

Note: These methods are only supported if System.capabilities.hasStylus is true.

Note: If your application supports both key and touch input, avoid using drag and drop to ensure good usability across target devices. You can simulate drag and drop on key-based devices by selecting, moving, and releasing elements, but this results in a poor user experience and requires extra implementation. The user should be able to perform the same tasks smoothly with both input methods.

To make an element draggable, call startDrag() within the onPress() or onMouseDown() event handler. The following code snippet uses onPress() with the global startDrag() to enable dragging of a MovieClip:

myMovieClip.onPress = function() {
    startDrag(this);
};

To stop dragging a MovieClip, call stopDrag() within the onRelease() or onMouseUp() event handler. The following code snippet uses onRelease() with the global stopDrag() to disable dragging of a MovieClip:

myMovieClip.onRelease = function() {
    stopDrag();
};

The following code snippet uses mouse event handlers with the dedicated drag methods to start and stop dragging of a MovieClip:

// Create an object for the touch (mouse) event listener.
var touchListener:Object = new Object();

// Define the onMouseDown event handler.
touchListener.onMouseDown = function() {
    trace("onMouseDown() called");
    // Check if onMouseDown() occurs over myMovieClip. If yes, start drag.
    if (myMovieClip.hitTest(_root._xmouse, _root._ymouse)) {
        myMovieClip.startDrag();
        trace("myMovieClip is draggable");
    }
}

// Define the onMouseUp event handler.
touchListener.onMouseUp = function() {
    trace("onMouseUp() called");
    // Check if onMouseUp() occurs over myMovieClip. If yes, stop drag.
    if (myMovieClip.hitTest(_root._xmouse, _root._ymouse)) {
        myMovieClip.stopDrag();
        trace("stopped dragging myMovieClip");
    }
}

// Enable the listener.
Mouse.addListener(touchListener);