HTML5 复合组件，第 2 部分 实现拖放-3

look_w

<h5:drag> 和 <h5:drop> 组件<h5:drag> 和 <h5:drop> 组件在 3 个文件中实现，每个组件各一个（drag.xhtml 和 drop.xhtml），另一个是 <h5:drop> 组件的 JavaScript 文件（drop.js），如图 3 所示：
图 3.  <h5:drop> 和 <h5:drag> 组件的文件尽管组件使得 Ajaxified 拖放非常容易，但其实现适中。两个组件使用 facelets 标记和 JavaScript 完全实现：大约 100 行标记和 50 行 JavaScript。为了说明，我将在三个迭代中探究它们的开发：

• 在客户端实现拖放
• 发生放置时添加 Ajax 调用
• 支持有条件拖拉

在客户端拖放首先，我将精力集中在客户端。当用户在放置目标放置一个链接时，我只显示一个示警框，其中在文章的 URL 后显示标题。如图 4 所示：
图 4. 警示框显示在放置目标放置的链接为了说明如何实现  所示的拖放，我将对以下工件做一一介绍：

• 拖拉源
• 拖拉源组件
• 放置目标
• 放置目标组件
• 放置目标组件的 JavaScript

拖拉源应用程序中间部分的每个链接（图 5 中高亮显示的）是一个拖拉源：
图 5. 拖拉源清单 2 显示拖拉源的标记和 JavaScript：
清单 2. 拖拉源的标记和 JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<ui:composition xmlns="http://www.w3.org/1999/xhtml"    xmlns:h="http://java.sun.com/jsf/html"    xmlns:ui="http://java.sun.com/jsf/facelets"    xmlns:h5="http://java.sun.com/jsf/composite/html5"    xmlns:places="http://java.sun.com/jsf/composite/places">    <script>       // event.target is one of the h5:drag elements generated by ui:repeat below        function dragStart(event) {           var linkref = event.target.firstElementChild.firstElementChild; // anchor           var link = linkref.href;           var title = linkref.textContent;           event.dataTransfer.setData('text', title + " | " + link + " ");       }     </script>    <h:panelGrid id="items" columns="1" >      <ui:repeat value="#{rssFeed.items}" var="item">        <h5:drag ondragstart="dragStart(event)">         <p><a href="#{item.link}">#{item.title}</a> <br /></p>       </h5:drag>      </ui:repeat>    </h:panelGrid> </ui:composition>

中的标记使用 <h5:drag> 组件，当一个拖拉启动时指定一个 JSF 调用的 JavaScript 函数。浏览器传递一个事件到此 JavaScript 函数。事件目标是 <h5:drag> 组件。该函数从 <h5:drag> 元素深入到 anchor 元素，获取链接的文本和引用。它将该信息嵌入到一个与 text 数据传输类型相关的字符串中。从那以后，当一个放置被接受时，HTML5 拖放系统将此字符串转换成放置目标。