YUI Drag & Drop

发布日期：2013-11-20 17:51:05
YUIjavascriptjs

http://developer.yahoo.com/yui/dragdrop/ 

Drag and Drop API Document: http://yui.github.io/yui2/docs/yui_2.9.0_full/docs/module_dragdrop.html 

The following configuration properties are currently supported via the contructor's configuration object:

  • YAHOO.util.DragDrop: padding, isTarget, maintainOffset, primaryButtonOnly
  • YAHOO.util.DD (in addition to those in YAHOO.util.DragDrop): scroll
  • YAHOO.util.DDProxy (in addition to those in YAHOO.util.DD): resizeFrame, centerFrame, dragElId

All of these properties are public fields in the respective classes. See the API documentation for information about the fields.

Interesting Moments

Simply making an object draggable rarely suffices to achieve the desired interaction behavior for a drag-and-drop implementation. In most cases, Drag and Drop requires that you write code to respond to the interesting moments in the interaction: when the drag event starts, when the dragged object enters another object, and so on. The Drag and Drop Utility provides methods that fire during each of the interesting moments of the interaction. You customize your implementation by supplying the code for these methods (all of which are members of theYAHOO.util.DD, YAHOO.util.DDProxy, and YAHOO.util.DDTarget).

Moment Description
onMouseDown Provides access to the mousedown event. The mousedown does not always result in a drag operation.
startDrag Occurs after a mouse down and the drag threshold has been met. The drag threshold default is either 3 pixels of mouse movement or 1 full second of holding the mousedown.
onDrag Occurs every mousemove event while dragging.
onDragEnter Occurs when the dragged object first interacts with another targettable drag and drop object.
onDragOver Fires every mousemove event while over a drag and drop object.
onDragOut Fires when a dragged object is no longer over an object that had the onDragEnter fire.
onDragDrop Fires when the dragged objects is dropped on another.
onInvalidDrop Fires when the dragged objects is dropped in a location that contains no drop targets.
endDrag Fires on the mouseup event after a drag has been initiated (startDrag fired).
onMouseUp Fires on the mouseup event whether or not a drag was initiated.

Custom Events

In version 2.5.0, Custom Events were added to all DragDrop instances. See the API documentation for information about the events.

Event Description
mouseDownEvent Provides access to the mousedown event. The mousedown does not always result in a drag operation.
mouseUpEvent Fired from inside DragDropMgr when the drag operation is finished.
startDragEvent Occurs after a mouse down and the drag threshold has been met. The drag threshold default is either 3 pixels of mouse movement or 1 full second of holding the mousedown.
endDragEvent Fires on the mouseup event after a drag has been initiated (startDrag fired).
dragEvent Occurs every mousemove event while dragging.
invalidDropEvent Fires when the dragged objects is dropped in a location that contains no drop targets.
dragOutEvent Fires when a dragged object is no longer over an object that had the onDragEnter fire.
dragEnterEvent Occurs when the dragged object first interacts with another targettable drag and drop object.
dragOverEvent Fires every mousemove event while over a drag and drop object.
dragDropEvent Fires when the dragged objects is dropped on another.

You can subscribe to these events using the on method for the DragDrop instance.

var dd = new YAHOO.util.DD('demo');
dd.on('dragEvent', function(ev) {
    YAHOO.log('Element is being dragged.');
}, dd, true);
 
 

 

Drag & Drop: Examples

 

The Drag & Drop Utility allows you to create a draggable interface efficiently, buffering you from browser-level abnormalities and enabling you to focus on the interesting logic surrounding your particular implementation.

 

 

发表评论