js拖动删除

基础概念

JavaScript 拖动删除是指通过鼠标操作（拖拽）来移动页面上的元素，并在特定条件下将其从 DOM 中移除的功能。这种交互方式常见于各种应用中，如文件管理器、待办事项列表等。

类型

简单拖动删除：元素被拖动到特定区域后自动删除。
条件触发删除：拖动过程中满足某些条件（如超过一定距离）时触发删除。
动画效果：在拖动和删除过程中添加过渡动画，提升视觉体验。

应用场景

文件管理器：用户可以通过拖动文件到垃圾桶图标来删除文件。
待办事项列表：拖动任务项到列表外即可删除该任务。
图片编辑器：拖动图片到特定区域进行删除或替换。

示例代码

以下是一个简单的 JavaScript 拖动删除示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag and Drop Delete</title>
<style>
  #container {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    position: relative;
  }
  .item {
    width: 50px;
    height: 50px;
    background-color: #f00;
    color: #fff;
    text-align: center;
    line-height: 50px;
    cursor: grab;
    position: absolute;
  }
  #dropZone {
    width: 100%;
    height: 20px;
    background-color: #ddd;
    position: absolute;
    bottom: 0;
  }
</style>
</head>
<body>

<div id="container">
  <div class="item" draggable="true">Item 1</div>
  <div class="item" draggable="true">Item 2</div>
  <div id="dropZone"></div>
</div>

<script>
  const items = document.querySelectorAll('.item');
  const container = document.getElementById('container');
  const dropZone = document.getElementById('dropZone');

  items.forEach(item => {
    item.addEventListener('dragstart', (e) => {
      e.dataTransfer.setData('text/plain', e.target.id);
      e.target.style.opacity = '0.5';
    });

    item.addEventListener('dragend', (e) => {
      e.target.style.opacity = '1';
    });
  });

  container.addEventListener('dragover', (e) => {
    e.preventDefault();
  });

  dropZone.addEventListener('drop', (e) => {
    e.preventDefault();
    const id = e.dataTransfer.getData('text/plain');
    const item = document.getElementById(id);
    container.removeChild(item);
  });
</script>

</body>
</html>

可能遇到的问题及解决方法

问题1：元素无法拖动

原因：可能是因为 draggable 属性未设置或设置为 false。

解决方法：确保每个可拖动元素的 draggable 属性设置为 true。

<div class="item" draggable="true">Item 1</div>

问题2：拖动过程中元素位置不正确

原因：可能是由于 CSS 样式设置不当，导致元素的定位出现问题。

解决方法：检查并调整相关元素的 position 属性和坐标值。

.item {
  position: absolute;
  /* 其他样式 */
}

问题3：删除操作未生效

原因：可能是因为 drop 事件处理程序中未正确获取或移除元素。

解决方法：确保在 drop 事件中正确获取要删除的元素，并使用 removeChild 方法将其从 DOM 中移除。

dropZone.addEventListener('drop', (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData('text/plain');
  const item = document.getElementById(id);
  container.removeChild(item);
});

通过以上步骤，可以实现一个基本的拖动删除功能，并解决常见的实现问题。

页面内容是否对你有帮助？

有帮助

没帮助

如何在ajax调用筛选之后使项目可拖放

、、、、

所以我得到了一张名单，名单上的名字是可拖动的。我有一个有帮助的复选框列表，我可以过滤那些名字。选中复选框后，我进行ajax调用。编辑<script> $("#myAccordion").accordion({heightStyle:"content", collapsible:true})

浏览 1提问于2016-12-19得票数 0

回答已采纳

1回答

在processing.js中拖动

我是伦敦的一名物理老师，我正在努力学习processing.js。有人知道如何从一个单独的文件中运行拖放的spript吗？您的想法是，您将绘制形状，并使其可拖动，与拖动代码在一个单独的文件？这将使教师资源的创建更加容易。如果人们能在这方面提供一些想法，那就太好了。

浏览 6提问于2010-02-27得票数 2

1回答

我找到了一个例子，说明了我试图通过Sortable.js库回购所做的事情，但是我还没有能够使用实现它。我的原理是添加一个<draggable/>元素，该元素与其他元素位于同一个group中，并侦听其中的@add事件，然后从其列表中删除该拖放元素。其中一个问题(可能)是，我试图指定一个“垃圾”按钮作为删除区域，如果它引用相同的可拖动group，则该拖动元素将被追加到按钮组并抛出整个UI。所以，有一件非常重要的事情，因为有某种用户反馈(例如，当拖放元素悬停时，垃圾图标会变红)，但是<em

浏览 1提问于2018-07-31得票数 4

回答已采纳

3回答

Jquery冲突:可拖动和障碍是同一个元素

、、、

但我必须在可拖动和障碍上使用相同的类(dragMe)，因为这两个元素都是可拖动的。它不起作用，元素甚至都没有被拖动。

浏览 0提问于2014-05-28得票数 2

4回答

如何删除div的可拖事件？

、、

如何删除div的可拖事件？<script t

浏览 2提问于2013-10-09得票数 1

回答已采纳

1回答

溢出滚动在jquery UI上不起作用

、、、

我在我的app.Using jquery ui上完成了函数主页的拖动，并且触摸打孔机js.The参考链接是。现在我有一个问题。溢出滚动在iPhone和ipad上不起作用。如果我删除了拖动功能，这是工作fine.What我做错了吗？

浏览 0提问于2013-03-04得票数 0

2回答

如何删除数组中索引前后的元素

、、、、

我有一个包含数组的数组： [[], [0], []. [3], [], [6], []] 这些元素位于使用可拖动JS的vue组件中。Draggable有两个属性@start和@end。每当我拖动其中一个元素时，我都希望删除当前元素之前和之后的空数组。因此，当我拖动6时，数组应该如下所示： [[], [0], []. [3], [6]] isVisible是在@start触发的，所以每当我选择一个元素时。如何删除数组中索引前后的元素？

浏览 87提问于2021-03-19得票数 0

1回答

为什么不能在指定助手之后拖动div：“克隆”

、、

我不知道为什么在我指定助手：“克隆”之后，div变得不可拖

浏览 2提问于2016-03-15得票数 0

回答已采纳

1回答

Jquery UI拖放定义哪些内容可以移动，哪些内容不能移动

、

我有一个从本教程创建的拖放UI，当我不想让小部件不可拖动/不可排序时，我就遇到了问题。目前设置为不能拖动“Widget 1”。如果我将其从widgetIndividual对象中删除，则会破坏整个功能。理想情况下，这些应该在页面上定义，而不是在单独的js文件中定义。如果我从widgetIndividual中删除以下代码，它会破坏一切。

浏览 2提问于2012-02-05得票数 1

回答已采纳

1回答

带有HTML5拖放事件的div上的Hammer.js拖放元素

、、、、

TL；博士 return false;知道如何在使用Ha

浏览 4提问于2014-06-21得票数 5

1回答

如何在vis.js时间线中获取drop的开始和结束时间？

、、、、

我在我的vue.js项目中实现了vis.js时间线，但我在删除时遇到了一个问题。首先，我认为拖放在该库中不起作用，其次，当我拖动一个项目然后将其拖放时，如何获得开始和结束时间和日期？那么，有没有办法在我停止拖动项目后，获得拖放后的开始时间和结束时间？谢谢。

浏览 26提问于2018-07-12得票数 1

3回答

D3.js:从选择中删除force.drag

、、、

我有一个(相当简单的)问题:如何在D3.js所做的选择上“取消调用”force.drag？假设我创建了一组元素，并在其上调用了"call“，使其具有强制布局的拖动回调功能。它看起来像这样：现在应该可以在以后从一些节点中删除该行为。我的方法包括重置各种监听器，如“单击”、“拖动”等，使用 d3.select('rect#no-drag').on('click',

浏览 1提问于2012-10-30得票数 12

回答已采纳

1回答

如何在使用CSS或JavaScript拖动img时删除重影图像？

、、

">我想在用户拖动图像时更改.image-wrapper的位置，但我不希望在拖动图像时出现重影图像。我确实想拖动图像，我只是不想在拖动时出现鬼影图像。顺便说一句，除none以外的任何值都不会删除重影图像。试错#3$('img').on('dragstart', function (event) { var emptyImage = document.c

浏览 84提问于2018-03-05得票数 1

回答已采纳

1回答

为selenium UI集成测试执行Javascript拖放Java

、、、、

我有一个html页面，它包含我需要拖动到目标的元素。我已经试过用硒做动作了，它对我没用。对于两个元素(#G1)，我有唯一的id，我需要拖动和位置(#a)，我需要删除它。

浏览 6提问于2015-10-15得票数 2

回答已采纳

1回答

可拖动的jquery对象对动态创建的对象上的.click()没有响应

、、、

我正在创建一个可拖动的jquery对象，它需要首先被拖动和移动(复制到主容器)，然后单击以作为模式窗口打开，并提供进一步的选项。如果将静态对象放在那里，JS会对单击做出响应。}); </script>编辑1: DAD.js (Jquery插件)添加了删除选项。从而导致无法点击！

浏览 0提问于2015-06-25得票数 0

3回答

当使用jQuery放置到div中时，.droppable UI删除元素

、、、

使用jQuery UI的.draggable.可拖动这些图像码<div class="stack">one</div> <div class="stack">two</

浏览 2提问于2012-03-21得票数 6

回答已采纳

2回答

JS，React -使用div块计算动态创建区域的高度

、

我正在寻找一个JS / React解决方案来计算可拖动div块的高度或行数(具有不同的宽度)。正如您可以想象的那样，在调整窗口大小/更改分辨率以及拖动块/删除或添加到draggable_blocks_container期间，计算应该动态工作。

浏览 1提问于2017-06-01得票数 0

2回答

是否可以在拖动png图像时删除背景颜色？

、、、

我正在尝试使用react-dnd在react-js中制作一个国际象棋游戏。我正在尝试在不同的div(代表棋盘方块)之间创建可拖放的png图像。我试着将图像背景颜色的不透明度设置为0，但不起作用问题是，当我拖动图像时，图像采用正方形背景颜色，是否可以将其从拖动图像中删除？如果没有，有没有其他的拖放库可以实现呢？

浏览 14提问于2019-04-14得票数 1

1回答