使用HTML5原生拖放时如何约束移动？
在使用HTML5原生拖放时，可以通过以下方法来约束移动：
- 使用dragstart事件：在拖动开始时，可以通过该事件来设置一些约束条件。例如，可以使用event.dataTransfer.setData()方法设置一个自定义的数据类型，并将其与拖动元素关联起来。
- 使用dragenter和dragover事件：这两个事件可以用来阻止默认的拖放行为，并且可以通过event.preventDefault()方法来阻止元素被放置到不允许的区域。可以在这两个事件中检查鼠标位置或目标元素的属性，以确定是否允许放置。
- 使用drop事件：在元素被放置时，可以通过该事件来执行一些操作。可以在该事件中检查拖动元素的数据类型，并根据需要执行相应的操作。
以下是一个示例代码，演示如何使用HTML5原生拖放来约束移动：
<!DOCTYPE html>
<html>
<head>
<style>
.dropzone {
width: 200px;
height: 200px;
border: 2px dashed #ccc;
padding: 10px;
}
.dragitem {
width: 100px;
height: 100px;
background-color: #f1f1f1;
border: 1px solid #ccc;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="dropzone" ondragover="allowDrop(event)" ondrop="drop(event)">
<div class="dragitem" draggable="true" ondragstart="drag(event)">Drag me</div>
</div>
<script>
function allowDrop(event) {
event.preventDefault();
}
function drag(event) {
event.dataTransfer.setData("text/plain", event.target.id);
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("text/plain");
var draggableElement = document.getElementById(data);
var dropzone = event.target;
// 检查是否允许放置
if (dropzone.classList.contains("dropzone")) {
dropzone.appendChild(draggableElement);
}
}
</script>
</body>
</html>在上述示例中，我们创建了一个拖放区域（dropzone）和一个可拖动的元素（dragitem）。通过设置元素的draggable属性为true，使其可拖动。在拖动开始时，我们使用drag事件将元素的id关联到拖动数据中。在放置时，我们检查目标元素是否为dropzone，并将拖动元素放置到其中。
这只是一个简单的示例，你可以根据具体需求进行更复杂的约束和操作。对于更高级的拖放需求，可以考虑使用一些优秀的JavaScript库，如jQuery UI或interact.js，它们提供了更多的功能和灵活性。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云物联网平台（IoT Hub）：https://cloud.tencent.com/product/iothub
- 腾讯云移动开发平台（MTP）：https://cloud.tencent.com/product/mtp
相关·内容
我有一些非常简单的代码，可以将图像拖放到不同的框中。当图像被删除时，它的父节点将删除它，并将其拖放到其上的区域将其追加。效果很好。但是，如果我拖放一个图像到另一个图像上，那么由于某种原因，同一个ondrop事件会触发，因此该图像最终会被删除，但不会重新插入。
我尝试了几种方法来解决这个问题:添加第二个drop函数，它什么也不做，并设置图像的ondrop属性，为返回false的图像创建一个"disallowdrop“函数，两者都不起作用。当某个东西被拖放到图像上时，不应该调用drop函数。无论如何，我认为元素在默认情况下不接受拖放元素。
下面是我的代码：
<!DOCTYPE htm
浏览 3提问于2014-05-01得票数 0
回答已采纳
1回答
如果春天不工作的话，拖放
、、、、
我正在尝试在Spring (在Eclipse2020-03中工作)实现拖放iframe，而iframe似乎不接受任何合作的可能性。我遇到了这个(可以说是更老的)工作代码片段，但是eclipse中的iframe甚至不能接受window.onload。问题出在哪里？
编辑:添加我的代码
<script>
var dragged;
/* events fired on the draggable target */
document.addEventListener("drag", function(event) {
}, false)
浏览 0提问于2020-07-26得票数 0
回答已采纳
2回答
我有这样的UL标签：
<ul ondrop="drop(event)" ondragover="allowDrop(event)">
<li class="item" draggable="true" ondragstart="dragStart(event)" ondrag="dragging(event)">
<div class="product-infos">
<a href="
浏览 0提问于2016-03-14得票数 0
回答已采纳
我的代码如下：
<style>
.box {
border:1px solid black;
margin:40px;
padding:20px;
}
.dragitem {
border:1px solid red;
padding:10px;
margin:10px;
}
</style>
<div class="box" ondragover="allowDrop(event)" ondrop="drop(ev
浏览 2提问于2017-03-02得票数 0
回答已采纳
我正在构建一个简单的拖N拖放应用程序演示，拖放应该被拖过下拉区域，并可以留在那里。
就在这里，
我遇到的问题是：
.addEventListener() I不能将回调函数dragoverHandler和dropHandler附加到元素dropzoneOne
如果我将dragoverHandler和dropHandler作为属性直接附加到HTML下拉区域，例如ondrop=“dropHandler(事件)”，代码片段就能工作。
有人能帮忙吗？
const draggableOne = document.getElementById('draggable-1');
浏览 2提问于2022-07-17得票数 0
回答已采纳
我有12个具有不同id的参数，我想将它们拖放到相应的云中。这四种云中的每一种都至少有三个相应的参数。如果错误的参数被放在错误的云中，那么应该会显示一条错误消息，并将错误的参数发送回初始占位符。到目前为止，我已经成功地编写了拖放代码，但由于涉及的id数量太多，我似乎无法将可拖放对象定向到它们想要的dropzones。如果有任何帮助，我将不胜感激。 下面是我的html和javascript代码 var dragged;
/* events fired on the draggable target */
document.addEventListener("drag"
浏览 11提问于2020-09-25得票数 3
回答已采纳
2回答
我试图拖放图像到div区域，但我只能拖动它，但它没有出现在div当我已经下降它。我也想复制图像，这样当它被删除时，原来的图像就不会消失。
Javascript代码：
var dragItem1 = document.getElementById("drag1");
var dropdiv1 = document.getElementById("div1");
//event will be fired when a user starts dragging the item
浏览 1提问于2017-10-03得票数 0
回答已采纳
我使用下面的代码将项目(左)拖到drop项目(右)。拖动到右侧后，可以将它们拖回左侧。 我正在使用 document.getElementById(dropID).appendChild(document.getElementById(dragID)) 将它们拖回，因此它们始终被添加为最后一个div。 有没有办法把项目拖到左边，放在已经在左边的其他div之间？而不是总是添加到末尾？ 此外，这将允许通过在左侧的项之间拖动它们来对它们进行排序，不使用jquery会很容易吗？谢谢! <!DOCTYPE HTML>
<html>
<head>
<style&
浏览 21提问于2020-06-11得票数 0
回答已采纳
2回答
我这里有这个div，我在拖放API中使用它：
<div class="box student" draggable="true" style="background-color: #1DDBCA;margin:10px" id="5"><span>Seymen Ege</span></div>
如果我拖动这个元素：
<div class="box c1r1" draggable="true" style="background-color
浏览 1提问于2022-01-24得票数 0
回答已采纳
我有两个自定义元素，A和B。我目前已经设置了这些元素，这样我就可以将A拖放到B上，并将A的副本添加为B的子项。我不希望A的副本作为子项。我希望A本身就是孩子。 我该怎么做呢？ 我使用dataTransfer向B发送超文本标记语言，然后B正在构造A的副本。我很乐意使用某种东西，而不是dataTransfer，只要它能完成工作。我不想使用任何库。 CoffeeScript： class A extends HTMLElement
constructor: () ->
super()
this.setAttribute 'draggable&#
浏览 20提问于2019-04-08得票数 1
回答已采纳
我尝试过这样做，但是onDrop方法不返回图像文件。
onDragStart(event, data: any) {
event.dataTransfer.setData('data', data);
}
onDrop(event, data: any) {
let dataTransfer = event.dataTransfer.getData('data');
event.preventDefault();
}
allowDrop(event) {
event.preventDefault();
}
<div (drop)="
浏览 2提问于2017-03-24得票数 17
1回答
我试图用HTML5在安卓浏览器中实现一个简单的拖放操作。当我试图拖动一个对象时，只有屏幕滚动，我无法拖动其中的任何内容。有没有办法做到这一点？
HTML在这里：
For drag:
<div id="an-obj-12" draggable="true" ondragstart="drag(event)" dropzone="copy">42a</div>
<div id="an-obj-13" draggable="true" ondragstart=&#
浏览 11提问于2012-07-26得票数 7
我有这个内容拖放脚本，我用它在执行时将一些值提交到php页面。它的工作方式就像系统上的charm，但当我在移动设备中打开页面时，它确实被拖拽了。
代码为：：
<html>
<head>
<script>
/* Event fired on the drag target */
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
/* Events fired on the drop target */
function
浏览 12提问于2017-02-18得票数 0
回答已采纳
我对这一切还是个新手，我一直在网上寻找，但还是想不出一个办法。
我有一个拖放功能。用户将被给予文章标题，并被指示将文章标题拖到标记为'True‘或'False’的框中。
当用户将其放入“False”框中时，我如何让它提醒用户？
蒂娅！！
HTML代码：
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="dropt
浏览 0提问于2018-06-06得票数 0
这是我的密码：
var dragged
document.addEventListener("drag", function (event) {
}, false)
document.addEventListener("dragstart", function (event) {
dragged = event.target
event.target.style.opacity = .5
}, false)
document.addEventListener("dragend
浏览 1提问于2018-10-04得票数 0
回答已采纳
在下面的HTML中，我有两个div面板。一个是带有可拖动元素的侧面，第二个是主区域-可拖动div应该被拖放的区域。当拖动开始时，我希望主区域淡出，除了一些div，这些div是在每个拖动事件中动态计算的。我使用的是.fade-out类，但它实际上并不起作用，因为一个实际的应用程序有太多的div作为main-area的子级，所以遍历所需div的HTML集合将不起作用。那么，最好的方法是什么，最好只使用JavaScript？
<div class="side-panel">
<div draggable="true" ondrag="
浏览 2提问于2017-02-13得票数 0
6回答
我有一个HTML页面，其中包含一些可拖放的元素。我们的规格说明，鼠标悬停在这样的元素上，光标必须是grab。
，在拖动期间游标必须是grabbing
。
我知道可以设置，它可以在拖放区域上方更改光标外观，但是很少有选项：copy、move、link和none --没有自定义或类似的选项。
我尝试用Javascript和CSS更改游标，比如在触发cursor: grabbing;时设置ondragstart。但是，在拖放区域拖动时，将出现浏览器默认移动光标。
所以问题是：，我缺少什么来显示抓取光标( )
( )在拖动过程中？
不幸的是，我不能在解决方案中使用JQuery或其他帮助库。提前感
浏览 1提问于2017-06-08得票数 29
回答已采纳
1回答
循环仅应用于最后一项。
、、、
我正在做一个简单的拖放活动，检查是否所有拖放项都在正确的拖放区域中。事情会被洗牌，但本质上，我所看到的方式是每个拖放区检查是否包含“拖动”+匹配数组#(即。第一个数组项drag0位于第一个数组项放置区域内)。
但是，它只对最后一项有效(您可以正确地完成最后一项，并得到正确的响应)。我已经看到了将其包装在函数中的选项，或者使用抛出/捕捉，但是似乎没有什么可行的。
项类是可拖放项，下拉区域是可下垂区域的类。
function seeResult() {
var result = document.getElementById("result");
var drags =
浏览 0提问于2018-11-29得票数 0
回答已采纳
目前，我正在处理一个场景，在拖动开始后，我需要更改附加到拖放元素的数据。基本上，拖放区是输入字段或文本区域，所以我想使用本机event.dataTransfer.setData，因为本机拖放可以使插入符号用鼠标移动。
如果我只是在setData()事件的侦听器中同步调用dragstart，那么在开始时一切都是完美的。
dragItem.addEventListener("dragstart",function(event){
event.dataTransfer.setData("text/plain","data set in drags
浏览 1提问于2016-08-06得票数 10
我正在尝试更改铬中可拖动项的光标。我试过的一切都不管用。斯塔克溢出上有解决方案，但它们都过时了，无法使用实际的铬版本。
在拖动时，将项目复制到容器中，容器是可拖动对象的拖动映像。
我想要的是在拖动时有一个抓取光标。这怎么可能？有什么想法吗？
有关示例，请参阅我的代码片段。
new Vue({
el: '#app',
data: {
text_drop: 'Droppable Area',
text_drag: 'Drag Area',
drag_elements: [
{te
浏览 0提问于2018-03-03得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
