YUI 3.x Home -

Library Examples: Drag & Drop

Drag & Drop: Examples

The Drag & Drop Utility allows you to create a variety of standard draggable objects with just a few lines of code and then, using its extensive API, add your own specific implementation logic.

  • Simple Drag: This example shows a simple drag interaction that doesn't require a drop interaction.
  • Drag Node Plugin: This example shows how to apply the Drag Plugin to a node
  • Proxy Drag: This example shows a simple proxy drag interaction that doesn't require a drop interaction.
  • Drag Constrained to a Region: This example shows how to constrain a draggable Node to another Node's region.
  • Interaction Groups: Using interaction groups, this example demonstrates how to tie into the Drag & Drop Utility's interesting moments to provide visual affordances for the current drag operation.
  • Using the Drag Shim: This example shows the use of the drag shim when dragging nodes over other troublesome nodes.
  • Animated Drop Targets: This example will show you how to make an animated node a Drop target.
  • Drop Based Coding: This example shows how to use the Drop Target events to code your application.
  • Window Scrolling: This example shows how you can use the DD Scroll plugin to scroll the browser window as you drag.
  • Drag Delegation: This example shows how you can use DD.Delegate to create a scalable solution which supports multiple draggable items.
  • Drag Delegation with a Drop Target: This example uses DD.Delegate to support dragging multiple items and dropping them onto a Drop Target.
  • Using Drag Plugins with Delegate: This example show how you can use the Drag plugins with a DD Delegate based solution.
  • List Reorder w/Bubbling: This example shows how to make a sortable list using Custom Event Bubbling.
  • List Reorder w/Scrolling: This example shows how to make a sortable list using Custom Event Bubbling and Node Scrolling.
  • Portal Style Example: Portal style example using Drag & Drop Event Bubbling and Animation.
  • Photo Browser: An example Photo Browser application.

Examples That Make Use of Drag & Drop

Copyright © 2011 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings