HTML5拖拽:处理拖放事件

密西西比河 · 发表于 2015-4-29 20:18:48

处理拖放事件
在拖放数据传输
相关信息

本教程演示了如何在Tizen使用拖放。
注意: 这个功能只支持移动应用程序。

热身

熟悉HTML5拖拽API通过学习基本知识:

处理拖放事件创建可拖动元素和事件监听器来跟踪拖放事件。
在拖放数据传输做一个简单的谜题和拖拽把拼图块。

处理拖放事件隐藏

学习如何处理拖放事件是一个基本用户交互技巧:
- 通过添加定义可拖动元素 draggable="true"属性:
  1. <h1>Drag and drop tutorial</h1>
  2. <div class="example_body">
  3. <div id="drag-list">
  4. <div class="drag-row" draggable="true">1</div>
  5. <div class="drag-row" draggable="true">2</div>
  6. </div>
  7. <div>Drag state: <span id="log"></span></div>
  8. </div>
  复制代码
  2.为各种拖放事件添加事件监听器:
  1. <script>
  2. var cols = document.querySelectorAll('#drag-list_.drag-row');
  3. var colsLength = cols.length;
  5. for (var i = 0; i < colsLength; i++)
  6. {
  7. cols[i].addEventListener('dragstart', dragStart, false);
  8. cols[i].addEventListener('drag', dragIng, false);
  9. cols[i].addEventListener('dragenter', dragEnter, false);
  10. cols[i].addEventListener('dragover', dragOver, false);
  11. cols[i].addEventListener('dragleave', dragLeave, false);
  12. cols[i].addEventListener('drop', dragDrop, false);
  13. cols[i].addEventListener('dragend', dragEnd, false);
  14. };
  15. </script>
  复制代码
  3.定义事件处理程序的事件。在这种情况下,每个事件处理程序在屏幕上显示文本。
  1. function dragIng(e)
  2. {
  3. log.innerHTML = "drag"
  4. };
  6. function dragOver(e)
  7. {
  8. e.preventDefault();
  9. log.innerHTML = "dragOver"
  10. };
  12. function dragEnter(e)
  13. {
  14. log.innerHTML = "dragEnter"
  15. };
  17. function dragLeave(e)
  18. {
  19. log.innerHTML = "dragLeave"
  20. };
  22. function dragDrop(e)
  23. {
  24. e.stopPropagation();
  25. log.innerHTML = "dragDrop"
  26. };
  28. function dragEnd(e)
  29. {
  30. log.innerHTML = "dragEnd"
  31. };
  复制代码
  源代码这个用例相关的完整源代码,看到下面的文件:
  - drag_and_drop.html

在拖放数据传输隐藏

学习如何传输数据在一个简单的拖放拼图是一个基本用户交互技巧:

通过添加定义可拖动元素 draggable="true"属性。
在这个例子中,Tizen标志形象已经分裂,随机分配。每个成像仪部分被定义为可拖动,这样用户可以按照正确的顺序重新排列的图像部分。
1. <div class="example_body">
2. <div>Drag state: <span id="log"></span></div>
3. <div class="holder">
4. <div>
5. <img src="images/logo.png">
6. <p class="txt">Complete the puzzle to see a picture</p>
7. </div>
8. <ul id="puzzle">
9. <li class="puzzle-piece" draggable="true">
10. <img src="images/puzz_06.png">
11. </li>
12. <li class="puzzle-piece" draggable="true">
13. <img src="images/puzz_02.png">
14. </li>
15. <li class="puzzle-piece" draggable="true">
16. <img src="images/puzz_04.png">
17. </li>
18. <li class="puzzle-piece" draggable="true">
19. <img src="images/puzz_05.png">
20. </li>
21. <li class="puzzle-piece" draggable="true">
22. <img src="images/puzz_01.png">
23. </li>
24. <li class="puzzle-piece" draggable="true">
25. <img src="images/puzz_03.png">
26. </li>
27. </ul>
28. </div>
29. </div>
复制代码
2.添加事件监听器 dragover , dragleave , dragstart , drop 事件:
1. <script>
2. var cols = document.querySelectorAll('#puzzle_.puzzle-piece');
3. var colsLength = cols.length;
4. for (var i = 0; i < colsLength; i++)
5. {
6. cols[i].addEventListener('dragstart', dragStartHandler, false);
7. cols[i].addEventListener('dragover', dragOverHandler, false);
8. cols[i].addEventListener('dragleave', dragLeaveHandler, false);
9. cols[i].addEventListener('drop', dragDropHandler, false);
10. };
11. </script>
复制代码
(在这种情况下,图像传输数据部分):
- 声明 dragElem 变量,这是一个空对象的数据交换:
1. var dragElem = null;
复制代码
2.使用 DataTransfer接口的 dragStartHandler () 和 dragDropHandler () 事件处理程序交换图像部分:

function dragStartHandler(e)
{
/* Set data */
dragElem = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/html', this.innerHTML);
this.classList.add('over');
for (var i = 0; i < colsLength; i++)
{
cols[i].classList.add('start');
};
};
function dragDropHandler(e)
{
/* Get data */
dragElem.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/html');
for (var i = 0; i < colsLength; i++)
{
cols[i].className = "puzzle-piece";
};
/* Check key */
puzzleCheck();
};

复制代码

3.检查完成的拼图,用户主要使用一个简单的数组,并比较用户密钥对拼图密钥(正确答案):

var puzzleKey = ["01", "02", "03", "04", "05", "06"];
var puzzleArray = [];
function puzzleCheck()
{
/* Initialize the user key */
puzzleArray = [];
/* Insert the keys in the array */
for (var i = 0; i < colsLength; i++)
{
puzzleArray.push(cols[i].children[0].getAttribute('src').substring(12, 14));
};
originKey = puzzleKey.join();
userKey = puzzleArray.join();
if (originKey === userKey)
{
alert("Success !");
};
};

复制代码

图:拖拽难题

源代码

这个用例相关的完整源代码,看到下面的文件:

		自动登录	找回密码
密码			立即注册

HTML5拖拽:处理拖放事件

本帖子中包含更多资源

相关帖子