81 lines
2.5 KiB
HTML
81 lines
2.5 KiB
HTML
|
|
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<title>Yahoo! UI Library - Drag and Drop</title>
|
|
<link rel="stylesheet" type="text/css" href="./css/screen.css">
|
|
</head>
|
|
|
|
|
|
<body style="height:100%">
|
|
<img id="ylogo" src="img/logo.gif" />
|
|
|
|
<div id="pageTitle">
|
|
<h3>Drag and Drop</h3>
|
|
</div>
|
|
<div id="content">
|
|
<form name="dragDropForm" action="javscript:;">
|
|
<div class="newsItem">
|
|
<p> </p>
|
|
<p> </p>
|
|
|
|
<p><a href="drag.html?mode=dist">Drag test</a>:
|
|
All three squares can be dragged, and are drop targets</p>
|
|
|
|
<p><a href="ontop.html?mode=dist">Always on top</a>:
|
|
Same as the drag test, except the object being dragged is
|
|
displayed on top of the others.</p>
|
|
|
|
<p><a href="proxy.html?mode=dist">Proxy drag</a>:
|
|
The actual element is not moved during a drag operation.
|
|
Instead, an absolutely positioned div (created once for all instances) is resized to the dimensions
|
|
of the linked element and moved to the location of the drag operation.
|
|
</p>
|
|
|
|
<p><a href="list.html?mode=dist">Sortable list</a>:
|
|
When a list item is dragged past the center
|
|
of another list item, it is inserted before that item.
|
|
The items in the first two columns can interact with items in the other
|
|
column. The items in the third column are defined as a separate group,
|
|
so they can only interact with other items in the third column.
|
|
</p>
|
|
|
|
<p><a href="multihandle.html?mode=dist">Multiple drag handles</a>:
|
|
Shows how you can create multiple "hot spots" on your draggable item.
|
|
</p>
|
|
|
|
<p><a href="targetable.html?mode=dist">Targetable afforance</a>:
|
|
Demonstrates how multiple interaction groups and the events exposed
|
|
by the utility can be used to provide user feedback during the drag.
|
|
</p>
|
|
|
|
<p><a href="grid.html?mode=dist">Grid</a>:
|
|
Demonstrates the graduated movement feature of drag and drop.
|
|
</p>
|
|
|
|
<p><a href="resize.html?mode=dist">Resize</a>:
|
|
Demonstrates one approach to creating a draggable and resizable module.
|
|
</p>
|
|
|
|
<p><a href="circle.html?mode=dist">Custom Click Validator</a>:
|
|
|
|
In this example, we override clickValidator to provide custom logic for
|
|
determining if the initial mousedown should initiate a drag. A drag is
|
|
initiated only if the mousedown happens inside of the circle.
|
|
</p>
|
|
|
|
<p> </p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div id="footerContainer">
|
|
<div id="footer">
|
|
<p> </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|