Mojo.Drag

Namespace Detail

Method Summary

• Mojo.Drag.setupDropContainer(element, dropClient)
• Mojo.Drag.startDragging(sceneController, element, startEvent, options)

---

Method Detail

Mojo.Drag.setupDropContainer(element, dropClient)

Configures given element to be available as a valid destination for drag-and-drop items.

Parameters

• {string} element - The DOM element to act as a container for dragged items.

• {object} dropClient - An object implementing the interface described below, in order to interact with dragged & dropped elements. dropClient must be an object with the following properties:

  • dragEnter(element) - function called whenever the item is first dragged over this container.

  • dragHover(element) - function called whenever the item moves over this container.

  • dragLeave(element) - function called whenever the item is dragged outside this container.

  • dragDrop(element, newItem) - function called when the item is dropped over this container.

  • newItem - true if item came from a different container.

  • dragRemove(element) - function called when a contained item is dropped on a different container.

  • dragDatatype - String, optional. Only draggers with a matching datatype can enter/drop on this container.

---

Mojo.Drag.startDragging(sceneController, element, startEvent, options)

This function can be used to start dragging an element, and returns an active "dragger" object. This usually happens when the mouse is down, and maybe before the dragStart event actually occurs. In some cases, it's called when a hold event occurs (for stuff dragged on a push-and-hold), and in other cases, it's called on mousedown or dragStart.

The dragger sets things up for dragging, and prevents the drag from causing the scene to be scrolled. Both dragEnd and tap events will cause the drag operation to end, since dragStart/dragEnd events may never occur if there are no mousemove events. This sort of "aborted" drag operation is treated like any other, and will still cause the appropriate enter and drop methods to be called on the container.

Parameters

• {string} sceneController - The controller for the scene containing the element to be dragged.

• {string} element - DOM element to begin dragging.

• {Event} startEvent - The user event which began the drag...generally a mousedown event on the element being dragged. Used for hit detection with containers.

• {hash} options - Hash of the following optional values:

  • draggingClass - CSS class to apply when dragging starts, and remove when it's finished.

  • preventVertical - Boolean, true indicates vertical dragging is disallowed. Defaults to false.

  • preventHorizontal - Boolean, true indicates horizontal dragging is disallowed. Defaults to false.

  • allowExit - Boolean, true indicates the item can be dragged out of its current container, into other containers. Defaults to false.

  • preventDropReset - Boolean, true indicates element should not be returned to its original position, etc., when dropped. This can be accomplished after the fact by calling resetElement() on the dragger.

  • datatype - String, this element will only be able to be dropped on containers that specify the same datatype.

  • autoscroll - Boolean, true indicates the scene should be scrolled when dragged elements reach the edges of the visible area.

  • maxHorizontalPixel - int, max pixel object is allowed to be dragged to horizontally; default is undefined/free motion.

  • minHorizontalPixel - int, min pixel object is allowed to be dragged to horizontally; default is undefined/free motion.

  • maxVerticalPixel - int, max pixel object is allowed to be dragged to vertically; default is undefined/free motion.

  • minVerticalPixel - int, min pixel object is allowed to be dragged to vertically; default is undefined/free motion.