HTML5拖拽:处理拖放事件
处理拖放事件在拖放数据传输
相关信息
[*]HTML5拖拽指南
[*]HTML5拖拽移动WEB API
本教程演示了如何在Tizen使用拖放。
注意: 这个功能只支持移动应用程序。
热身
熟悉HTML5拖拽API通过学习基本知识:处理拖放事件创建可拖动元素和事件监听器来跟踪拖放事件。
在拖放数据传输做一个简单的谜题和拖拽把拼图块。
[*]显示所有
[*]隐藏所有
[*]处理拖放事件隐藏
学习如何处理拖放事件是一个基本用户交互技巧:
[*]通过添加定义可拖动元素 draggable="true"属性:
<h1>Drag and drop tutorial</h1>
<div class="example_body">
<div id="drag-list">
<div class="drag-row" draggable="true">1</div>
<div class="drag-row" draggable="true">2</div>
</div>
<div>Drag state: <span id="log"></span></div>
</div>2.为各种拖放事件添加事件监听器:
<script>
var cols = document.querySelectorAll('#drag-list_.drag-row');
var colsLength = cols.length;
for (var i = 0; i < colsLength; i++)
{
cols.addEventListener('dragstart', dragStart, false);
cols.addEventListener('drag', dragIng, false);
cols.addEventListener('dragenter', dragEnter, false);
cols.addEventListener('dragover', dragOver, false);
cols.addEventListener('dragleave', dragLeave, false);
cols.addEventListener('drop', dragDrop, false);
cols.addEventListener('dragend', dragEnd, false);
};
</script>3.定义事件处理程序的事件。 在这种情况下,每个事件处理程序在屏幕上显示文本。
function dragIng(e)
{
log.innerHTML = "drag"
};
function dragOver(e)
{
e.preventDefault();
log.innerHTML = "dragOver"
};
function dragEnter(e)
{
log.innerHTML = "dragEnter"
};
function dragLeave(e)
{
log.innerHTML = "dragLeave"
};
function dragDrop(e)
{
e.stopPropagation();
log.innerHTML = "dragDrop"
};
function dragEnd(e)
{
log.innerHTML = "dragEnd"
};源代码这个用例相关的完整源代码,看到下面的文件:
[*]drag_and_drop.html
在拖放数据传输隐藏
学习如何传输数据在一个简单的拖放拼图是一个基本用户交互技巧:
[*]通过添加定义可拖动元素 draggable="true"属性。
在这个例子中,Tizen标志形象已经分裂,随机分配。 每个成像仪部分被定义为可拖动,这样用户可以按照正确的顺序重新排列的图像部分。
<div class="example_body">
<div>Drag state: <span id="log"></span></div>
<div class="holder">
<div>
<img src="images/logo.png">
<p class="txt">Complete the puzzle to see a picture</p>
</div>
<ul id="puzzle">
<li class="puzzle-piece" draggable="true">
<img src="images/puzz_06.png">
</li>
<li class="puzzle-piece" draggable="true">
<img src="images/puzz_02.png">
</li>
<li class="puzzle-piece" draggable="true">
<img src="images/puzz_04.png">
</li>
<li class="puzzle-piece" draggable="true">
<img src="images/puzz_05.png">
</li>
<li class="puzzle-piece" draggable="true">
<img src="images/puzz_01.png">
</li>
<li class="puzzle-piece" draggable="true">
<img src="images/puzz_03.png">
</li>
</ul>
</div>
</div>2.添加事件监听器 dragover , dragleave , dragstart , drop 事件:
<script>
var cols = document.querySelectorAll('#puzzle_.puzzle-piece');
var colsLength = cols.length;
for (var i = 0; i < colsLength; i++)
{
cols.addEventListener('dragstart', dragStartHandler, false);
cols.addEventListener('dragover', dragOverHandler, false);
cols.addEventListener('dragleave', dragLeaveHandler, false);
cols.addEventListener('drop', dragDropHandler, false);
};
</script>(在这种情况下,图像传输数据部分):
[*]声明 dragElem 变量,这是一个空对象的数据交换:
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.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.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.children.getAttribute('src').substring(12, 14));
};
originKey = puzzleKey.join();
userKey = puzzleArray.join();
if (originKey === userKey)
{
alert("Success !");
};
};图:拖拽难题
源代码这个用例相关的完整源代码,看到下面的文件:
[*]drag_and_drop_practical.html
[*]logo.png
[*]puzz_01.png
[*]puzz_02.png
[*]puzz_03.png
[*]puzz_04.png
[*]puzz_05.png
[*]puzz_06.png
页:
[1]