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

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

look_w发表于 2018-9-20 18:51 | 只看该作者

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

拖拉源组件<h5:drag> 组件的实现比较简单，如清单 3 所示：
清单 3. <h5:drag> 组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:composite="http://java.sun.com/jsf/composite">

<composite:interface>
   <composite:attribute name="ondragstart"/>
</composite:interface>

<composite:implementation>
   <div draggable="true"
      ondragstart="#{cc.attrs.ondragstart}">
      <composite:insertChildren />
   </div>
</composite:implementation>
</html>

<h5:drag> 组件创建一个可拖拉的 DIV，其 ondragstart JavaScript 是页面创建者在中指定的值。该组件也使用 <composite:insertChildren> 将任意标记插入 <h5:drag> 标签体中。在中，标记是链接的锚。
放置目标如图 6 所示，放置目标在应用程序的右边菜单中：
图 6. 放置目标

清单 4 显示了放置目标的实现：
清单 4. 放置目标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:util="http://java.sun.com/jsf/composite/util"
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:h5="http://java.sun.com/jsf/composite/html5">

<script>
      function drop(event) { alert(event.dataTransfer.getData("text")); }
</script>

<h5:drop id="dropzone"
   ondrop="drop(event)">

   <div class="welcomeImage">
      <h:graphicImage id="welcomeImage"
         library="images" name="cloudy.gif"/>
   </div>

</h5:drop>
</ui:composition>

放置目标由一个封装在 DIV 中的 <h5:drop> 组件构成，它含有云图片。<h5:drop> 组件的 ondrop 属性引用一个 JavaScript 函数，显示一个示警框，包含从拖拉源传输来的字符串。
放置目标组件清单 5 显示 <h5:drop> 组件的实现：
清单 5. <h5:drop> 组件

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:composite="http://java.sun.com/jsf/composite">

<composite:interface>
   <composite:attribute name="ondragenter"/>
   <composite:attribute name="ondragover"/>
   <composite:attribute name="ondragleave"/>
   <composite:attribute name="ondrop"/>
</composite:interface>

<composite:implementation>
   <div id="#{cc.id}" ondragenter="#{cc.attrs.ondragenter}"
                     ondrop="#{cc.attrs.ondrop}"
                     ondragover="#{cc.attrs.ondragover}"
                     ondragleave="#{cc.attrs.ondragleave}">

      <composite:insertChildren />

   </div>

   <script> html5.jsf.init("#{cc.id}"); </script>
</composite:implementation>
</html>

<h5:drop> 组件，像 <h5:drag> 一样，创建一个 DIV，然后将 <h5:drop> 标签体中的标记插入此 DIV 中。
当创建了 <h5:drop> 组件后，就可以调用 html5.jsf.init()。该函数通过添加 drag-enter 和 drag-over 事件处理程序初始化组件的 DIV。这些事件处理函数在清单 6 中实现：
清单 6. <h5:drop> component 的 JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

if (!html5)
var html5 = {}
if (!html5.jsf) {
html5.jsf = {
   init : function(ccid) {
      var dropzone = $(ccid);

      dropzone.addEventListener("dragenter", function(event) {
         event.preventDefault();
      }, false);

      dropzone.addEventListener("dragover", function(event) {
         event.preventDefault();
      }, false);
   }
};
}

（我使用名称空间来避免冲突）中的 JavaScript 阻止浏览器对 drag-enter 和 drag-over 事件进行默认响应。记住，默认情况下，浏览器取消那些事件，因此的 JavaScript 阻止浏览器拒绝放置。可以说，进行那些 preventDefault() 调用是有点神秘，尽管如此，它是在可重用组件中进行封装的一个好的备用方案。
因为该 JavaScript 无条件阻止浏览器取消 drag-over 和 drag-enter 事件，它无条件接受所有放置。在现实世界中是不可能的，因此我将在中解决这一问题。接着，我将向您展示如何将 Ajax 添加到放置目标组件。

收藏分享评分

回复引用

订阅 TOP

返回列表

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

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

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

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