拖放组件有以下 5 个重要特性：
从最基本的角度来看，<h5:drag> 和 <h5:drop> 都封装了一些变化莫测的 HTML5 拖放组件来增强易用性。例如，浏览器默认拒绝拖放，因此，在您的 drag-enter 和 drag-over 事件处理程序中，您必须取消浏览器的默认反应，通过删除事件来完成。这个非直观难点在 <h5:drag> 组件中处理，这使页面创建者可以将精力集中在更重要的事上。
<h5:drag> 和 <h5:drop> 组件支持有条件的拖拉（drag）。页面创建者可以基于传输中的数据和考虑中的拖放目标选择接受或拒绝放置（drop）。
运行样例代码本系列的代码基于运行于企业容器（比如 GlassFish 或 Resin）内的 JSF 2。参阅本系列第一期 “”，这是个分步教程，讲解如何使用 GlassFish 安装和运行本系列的代码。在 下载 部分，获取本文的样例代码。
在 JSF 应用程序中，用户操作的数据大多数存储在服务器上，通常作为托管的 bean。由于这个原因，<h5:drop> 组件如果接受一个放置的话，将生成一个 Ajax 调用。页面创建者可以指定在 Ajax 调用返回时 JSF 将显示哪个组件。
<h5:drag> 和 <h5:drop> 组件也支持附加一些数据 — 通常称之为负载 — 到一个拖放指令中。页面创建者指定一个 bean 属性充当这个负载。在 Ajax 调用过程中，当出现放置时，由 <h5:drop> 组件启用，JSF 调用负载 bean 属性的 setter 方法。因此，JSF 像处理 <h:inputText> 元素值一样处理拖放负载。
使用拖拉源和放置目标<h5:drag> 和 <h5:drop> 分别代表 HTML5 拖拉源和放置目标，在一个使用这些组件的 JSF 应用程序中，您可以像这样使用拖拉源：
1
2
3
4
5
6
7
8
9
10
11
| <script>
function dragStart(event) {
event.dataTransfer.setData('text', "transfer this string");
}
</script>
<h5:drag ondragstart="dragStart(event)">
...
</h5:drag>
|
页面创建者可以将一些组件或 HTML 元素放在 <h5:drag> 组件中，然后在 ondragstart 函数中设置传输数据，正如上面的标记。
您可以像这样使用放置目标：
1
2
3
4
5
6
7
| <h5:drop id="dropzone"
payload="#{dragDrop.payload}"
render="@this"
...
</h5:drop>
|
与拖拉源一样，页面创建者可以将一些组件或 HTML 元素放在 <h5:drop> 组件中。页面创建者也可以指定一个 bean 属性作为拖放负载，且当在一个放置之后执行的 Ajax 调用从服务器返回时，指定 JSF 显示哪个组件。
页面创建者也可以选择使用 JavaScript 代码对拖放指令进行干预：
1
2
3
4
5
6
7
8
9
10
11
| <h5:drop id="dropzone"
payload="#{dragDrop.payload}"
render="@this"
ondragover="dragover(event)"
ondragenter="dragenter(event)"
ondragleave="dragleave(event)"
ondrop="drop(event)">
...
</h5:drop>
|
在上面的标记中，dragover()、dragenter()、dragleave() 和 drop() 函数（没有显示）由页面创建者实现。
现在，您已经知道了本文的大体走向，接下来，我们讨论本文的拖放用例：Feeds 应用程序。 |
