在HTML5中创建拖放功能

在HTML5之前,如果我们想在浏览器中实现拖放功能,我们必须使用jQuery和MooTools等库。现在我们有了HTML5 Drag and Drop,它使我们能够在浏览器中本地拖放数据。

虽然拖放是HTML5中包含的一个新API,但令人惊讶的是 - 它首先在IE5中实现,早在2005年,当Ian Hickson开始使用HTML5 API时。创建可拖动内容很容易;你只需添加拖动=真在你要移动的元素上。

拖放API添加了七个新元素,HTML元素可以监听;这些可用于监视拖放。事件的dragstart拖动Dragend的dragenterDragleave的dragover下降可以拆分为可以拖动的元素和可以将项目放入其中的元素。

拖动的元素可以触发三个事件:

  • 的dragstart:拖动可拖动元素时触发。
  • 拖动:移动可拖动元素时触发。
  • Dragend:拖放操作结束时触发。

可以接收可拖动元素的元素可以触发四个事件:

  • 的dragenter:在可拖动对象拖过元素时触发。
  • Dragleave:在可拖动对象被拖动到元素之外时触发。
  • 的dragover:在可拖动对象在元素内移动时触发。
  • 下降:在删除可拖动对象时触发。

在本教程中,我们将创建一个基本用户权限页面,其中包含Drag and Drop API的实现,用于在权限级别之间移动用户。

01.创建一个可拖动的元素

创建一个可拖动的元素很容易:你只需添加拖动=“真”到您希望能够拖动的元素。以下是我们将在用户权限页面上拥有的用户示例:

莱昂纳多

我们补充说拖动=“真”到标签,我们现在可以拖动链接。在此之后,我们需要告知浏览器何时拾取了某些内容 - 为此,我们将使用ondragstart事件来触发JavaScript函数。

莱昂纳多

如你所见,我们已经添加了ondragstart =“dragUser(this,event)”到了一个标签。这是一个用户开始拖动元素时将触发的事件,所以让我们创建DragUser功能。这将数据分配给数据传输对于刚刚启动的拖动。因此,如果你要拖Leon莱昂纳多,它会分配数据传输与莱昂纳多有关的数据。

function dragUser(user,event){
event.dataTransfer.setData('User',user.id);
}

现在我们已经正确设置了Leonardo,让我们理清其他用户。

02.创建要去的区域

现在我们有一个可以拖动的用户,我们需要创建一个区域来拖放它。

Div有三个事件处理程序:Ondrop跑了DropUser当一个元素被丢弃在div中时起作用;OndragenterOndragover使用false可防止浏览器运行默认操作。让我们创造DropUser功能。

function dropUser(target,event){
var user = event.dataTransfer.getData('User');
target.appendChild(的document.getElementById(用户));
}

我们正在创建一个名为的变量用户并设置为在启动拖动时包含数据集DragUser函数运行,然后使用使用appendChild函数将它添加到div中DropUser功能是由...触发的。现在让我们创建所有用户权限级别,并将用户添加到未分配的div中。


ondragover =“return false”>
编者

ondragover =“return false”>
管理员


接下来我们需要一些CSS来为我们的例子添加一些基本样式;光标:移动;在里面用户类的样式使用光标移动悬停的符号。

#user-levels {
宽度:900px;
保证金:0自动;
}
#super-admins,#admins,#edit,#contribs,#unassigned {
向左飘浮;
宽度:202px;
身高:170px;
填充:5px 10px;
Margin-right:3px;
背景:#eee;
Text-align:center;
}
.user {
宽度:100px;
填充:0 5px;
显示:块;
保证金:0自动3px;
Text-align:center;
border:1px solid #aaa;
背景:#ddd;
光标:移动;
}
.clear {
明确:两者;
}

我们现在应该有一个页面,使我们能够使用HTML5拖放API将用户拖放到权限级别。这是一个简单的例子,但它展示了HTML5拖放能力的潜力。

本文首次出现在.net杂志的第231期。

Thomas Hardy是位于泰恩河畔纽卡斯尔的网络开发人员。他目前在工作联合会Thomashardy.me.uk

喜欢这个?阅读这些!



翻译字数超限