不允许将两个对象拖动到空的div中。_编程开发

不允许将两个对象拖动到空的div中。

创始人

2025-01-11 11:01:29

0次

你可以通过以下代码示例来解决这个问题：

HTML:

JavaScript:

function allowDrop(event) {
  event.preventDefault();
}

function drag(event) {
  event.dataTransfer.setData("text", event.target.id);
}

function drop(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData("text");
  var draggableElement = document.getElementById(data);
  var dropzone = event.target;

  if (dropzone.tagName === "DIV") {
    dropzone.appendChild(draggableElement);
  } else {
    // 如果拖动到非空的div中，不执行任何操作
    console.log("不允许将两个对象拖动到空的div中。");
  }
}

这段代码首先定义了三个函数：allowDrop、drag和drop。其中，allowDrop函数用来阻止默认的拖放行为，drag函数用来设置拖动元素的数据类型和值，drop函数用来处理放置事件。

在HTML部分，我们有一个空的

元素（id为 "div1"），以及两个可拖动的图片（id为 "drag1" 和 "drag2"）。

在JavaScript部分，allowDrop函数使用 preventDefault 方法阻止默认的拖放行为。drag函数使用 setData 方法设置拖动元素的数据类型和值，以便在 drop 函数中使用。drop函数首先使用 preventDefault 方法阻止默认的拖放行为，然后获取被拖动的元素的id和放置目标的元素。如果放置目标是一个空的

元素，它会将被拖动的元素添加到这个

中。如果放置目标不是一个空的

元素，它会在控制台输出提示信息。

这样，当你将两个图片拖动到空的

中时，它们会被添加到

中。但如果你将它们拖动到一个非空的

中，控制台会输出提示信息"不允许将两个对象拖动到空的div中。"

上一篇：不允许将JWT刷新令牌作为参数传递

下一篇：不允许将明文的http流量发送到server.com。

不允许将两个对象拖动到空的div中。

相关内容

热门资讯