javascript ondrop事件使用教程

这篇文章将为大家详细讲解有关javascript ondrop事件使用教程，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

javascript ondrop 事件使用教程

简介

ondrop 事件会在元素上拖放操作的目标元素时触发，可用于处理拖放操作。

语法

element.ondrop = function(event) { ... };

使用步骤

1. 启用拖放

要启用拖放，需要在元素上设置 draggable 属性为 true。

element.draggable = true;

2. 设置 ondrop 事件处理程序

在目标元素上设置 ondrop 事件处理程序以响应拖放操作。

element.ondrop = function(event) { ... };

3. 处理拖放事件

ondrop 事件处理程序接受一个事件对象 event 作为参数，提供有关拖放操作的详细信息。

element.ondrop = function(event) {
  // 获取拖放的数据
  var data = event.dataTransfer.getData("Text");

  // 执行需要的操作

  // 防止浏览器默认处理
  event.preventDefault();
};

事件对象属性

event 对象提供有关拖放操作的以下属性：

• dataTransfer.getData: 获取拖放数据的函数。
• dataTransfer.setData: 设置拖放数据的函数。
• clientX/clientY: 鼠标指针相对于窗口的 X/Y 坐标。
• offsetX/offsetY: 鼠标指针相对于目标元素的 X/Y 坐标。
• pageX/pageY: 鼠标指针相对于文档的 X/Y 坐标。
• effectAllowed: 允许拖动元素时显示的效果（例如 “move”、”copy”）。
• dropEffect: 实际应用于拖动元素的效果。

示例

将文本从一个元素拖放到另一个元素

// 启用拖放
document.getElementById("draggable").draggable = true;

// 设置目标元素的 ondrop 事件处理程序
document.getElementById("droppable").ondrop = function(event) {
  // 获取拖放的文本
  var text = event.dataTransfer.getData("Text");

  // 设置目标元素的内容
  document.getElementById("droppable").innerhtml = text;

  // 防止浏览器默认处理
  event.preventDefault();
};

限制允许的拖放效果

// 启用拖放并限制允许的效果
document.getElementById("draggable").draggable = true;
document.getElementById("draggable").setAttribute("effectAllowed", "copy");

// 设置目标元素的 ondrop 事件处理程序
document.getElementById("droppable").ondrop = function(event) {
  // 获取拖放的数据
  var data = event.dataTransfer.getData("Text");

  // 设置目标元素的内容
  document.getElementById("droppable").innerHTML = data;

  // 防止浏览器默认处理
  event.preventDefault();
};

自定义拖放效果

// 启用拖放并自定义效果
document.getElementById("draggable").draggable = true;
document.getElementById("draggable").style.cursor = "move";

// 设置目标元素的 ondrop 事件处理程序
document.getElementById("droppable").ondrop = function(event) {
  // 获取拖放的数据
  var data = event.dataTransfer.getData("Text");

  // 设置目标元素的内容
  document.getElementById("droppable").innerHTML = data;

  // 防止浏览器默认处理
  event.preventDefault();
};

以上就是javascript ondrop事件使用教程的详细内容，更多请关注码农资源网其它相关文章！