随着技术的发展，用户界面设计也在不断进步。多点触控（如捏合手势）、基于手指的操作、滑动等技术无疑开创了人机交互的新纪元。这些革命性的想法激发了无数人的灵感。自从苹果公司将这些技术推向大众市场以来，几乎所有的手机制造商都在尝试将这些技术应用到他们的产品中。因此，思考了一个问题："为什么不将这些iPhone的设计理念应用到网页用户界面中呢？" 这种热情促使开始了这个项目。虽然这是一个简单甚至有些愚蠢的想法，但它确实值得考虑，因为它允许用户控制网页的显示方式。
这个想法可以应用到许多领域。以下是一些建议：
最近接触到了雅虎开发者提供的一些出色的工具，仅仅花费了几分钟，就爱上了这些工具。它们非常惊人且功能强大，发现它们具有巨大的潜力。最重要的是，它们完全免费且100%开源。可以通过访问了解更多详情和下载。如果能花几分钟时间研究这些令人惊叹的YUI工具，相信每个iPhone上的GUI幻想都可以在Web上轻松实现。这确实是令人惊讶的。
使用YUI非常简单。有大量的示例代码和数百万的文档。首先，需要在HTML中链接YUI脚本文件。可以将*.js文件下载到本地存储，或者直接链接到雅虎的存储库。在这个项目中，直接从雅虎的存储库链接*.js文件。
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yuiloader/yuiloader-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/dom/dom-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/button/button-min.js"></script>
接下来，创建了24个可拖动的对象，如下所示：
<div id="ProductItem-1" class="ProductItem">
<span class="ItemTitle">Yahoo Widgets</span>
<br/>
<img style="float: right" src="imgs/Yahoo Widgets.png"/>
<span class="ItemDesc">Yahoo Widgets.png</span>
</div>
...
<div id="ProductItem-24" class="ProductItem">
<span class="ItemTitle">Ad Aware</span>
<br/>
<img style="float: right" src="imgs/Ad Aware.png"/>
<span class="ItemDesc">Ad Aware.png</span>
</div>
以及24个占位符，这些可拖动的项目可以停靠在这些占位符中：
<div id="ItemBase-1" class="ItemBase"></div>
...
<div id="ItemBase-24" class="ItemBase"></div>
注意：可拖动对象的ID和占位符的ID。ID的后缀是一个序列号，用来识别哪个DD在哪个DDTarget中。
有了基本的东西准备好后，现在可以编写代码来实现用户拖动项目时的动画效果。当窗口加载时（即在window.onload事件），占位符会通过出色的CSS以表格形式排列。然后，可拖动的项目会根据ID后缀的顺序停靠在占位符中。
现在有趣的部分开始了。每个占位符都被注册为'Drop-Target'（YAHOO.util.DDTarget），每个产品项目都被注册为'DragDrop-Item'（YAHOO.util.DD）。
// 注册为Drop-Target Item
new YAHOO.util.DDTarget(document.getElementById('ItemBase-X'));
// 注册为Drag-Drop Item
new YAHOO.util.DD(document.getElementById('ProductItem-X'));
现在是时候处理事件了。当一个DD项目进入（事件：onDragEnter）到DDTarget项目的边界时，将现有的DD项目移动到相邻的DDTarget中，并反复移动到相邻的DDTarget，直到当前DD项目的原始DDTarget到达。知道这听起来有点棘手。但这非常简单。
// 从前面的位置上开始拖动
if (startIndex < tIndex) {
for (var i = startIndex + 1; i <= tIndex; i++) {
// 向上移动
setPosition(m_Store[i], i - 1);
}
} else {
// 从较低的位置开始拖动
for (var i = startIndex - 1; i >= tIndex; i--) {
// 向下移动
setPosition(m_Store[i], i + 1);
}
}
...
function setPosition(el, index) {
var Dom = YAHOO.util.Dom;
m_Store[index] = el;
var pos = Dom.getXY('ItemBase-' + (index + 1).toString());
// 哇！喜欢在这里创建动画。
new YAHOO.util.Motion(el.id, { points: { to: pos } }, 0.3, YAHOO.util.Easing.easeOut).animate();
}
注意Motion类 - YUI的动画库。有许多有趣的动画效果。backBoth, backIn, backOut：稍微回退，然后改变方向，超过终点，然后改变方向并回到终点。bounceBoth, bounceIn, bounceOut：从开始和结束处弹跳。easeBoth, easeIn, easeOut：开始缓慢并在结束时减速。elasticBoth, elasticIn, elasticOut：弹性效果的快照。类似地，编写了代码来实现项目被放入DDTarget时的动画（事件：onDragDrop）以及当它被放在有效DDTarget之外时的动画（事件：onInvalidDrop）。事实上，编码非常简单，任何人都能理解。感谢YUI工具让生活变得轻松，提供了如此出色的库。
这只是一个包含一些硬编码项目的静态网页。但目前正在开发一个网站，该网站将面向许多财务顾问，他们可以在首页上自定义和安排他们的财务产品。该网站的客户或最终用户可以根据自己的优先级进一步进行安排。预计这将是一个开创性的网站，并将吸引许多时尚的网络爱好者。一旦网站上线，会在这里放上URL，所以请留意这个空间。