javascript - 在拖放网格中复制图像-6ren

javascript - 在拖放网格中复制图像

转载作者：行者123 更新时间：2023-12-03 05:15:21

我有一个拖放功能，可以将图像从侧边栏拖到网格中。当图像进入网格时，它会克隆图像。虽然，当我将网格中的图像拖动到另一个网格空间时，它会复制它，但我不希望它这样做。这是我的代码:

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

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

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    var el = ev.target;
    if (!el.classList.contains('dropzone')) {
       el = ev.target.parentNode;
       ev.target.remove();
    }
    el.appendChild(document.getElementById(data).cloneNode(true));
}

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementsByTagName("body")[0].style.marginLeft = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementsByTagName("body")[0].style.marginLeft= "0";
}

#div1, #div2, #div3, #div4{
	float: left;
    width: 55px;
    height: 55px;
    border: 1px solid black;
}

#div5, #div6, #div7, #div8{
	float: left;
    width: 55px;
    height: 55px;
    border: 1px solid black;
}

#div9, #div10, #div11, #div12{
	float: left;
    width: 55px;
    height: 55px;
    border: 1px solid black;
}

#div13, #div14, #div15, #div16{
	float: left;
    width: 55px;
    height: 55px;
    border: 1px solid black;
}

.row2 {
	clear: both;
}

.row3 {
	clear: both;
}

.row4 {
	clear: both;
}

body {
  transition: margin .5s;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}
.row {
  width:100%;
  display:inline-block;
  margin-bottom:10px;
}

@media screen and (max-height: 450px) {
  .sidenav {
  padding-top: 15px;
  }

  .sidenav a {
  font-size: 18px;
  }
}

<!DOCTYPE html>
<html>
<script>

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

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

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    var el = ev.target;
    if (!el.classList.contains('dropzone')) {
       el = ev.target.parentNode;
       ev.target.remove();
    }
    el.appendChild(document.getElementById(data).cloneNode(true));
}

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementsByTagName("body")[0].style.marginLeft = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementsByTagName("body")[0].style.marginLeft= "0";
}

</script>
<body>

 <div id="main">
  <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Materials</span>
</div>

<div id="div1" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div id="div2" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div id="div3" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div id="div4" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div class="row2">

<div id="div5" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div id="div6" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div id="div7" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div id="div8" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>

<div class="row3">

<div id="div9" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div id="div10" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div id="div11" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div id="div12" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>

<div class="row4">

<div id="div13" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div id="div14" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div id="div15" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div id="div16" class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

<a href="#">

    <img src="bricks.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="55" height="55">

   Bricks

</a>

<a href="#">

    <img src="halfbrick.png" draggable="true" ondragstart="drag(event)" id="drag1.3" width="55" height="55">

   Half Brick

</a>

<a href="#">

    <img src="halfbrick2.png" draggable="true" ondragstart="drag(event)" id="drag1.6" width="55" height="55">

   Half Brick

</a>

<a href="#">

    <img src="#" draggable = "true" ondragstart="drag(event)" id="drag2" width="55" height="55">

  Stone

</a>
<a href="#">

    <img src="#" draggable = "true" ondragstart="drag(event)" id="drag3" width="55" height="55">

    Wood

  </a>
  <a href="#">

    <img src="#" draggable="true" ondragstart="drag(event)" id="drag4" width="55" height="55">

  Eraser

  </a>
</div>

</body>
<style>

#div1, #div2, #div3, #div4{
	float: left;
    width: 55px;
    height: 55px;
    border: 1px solid black;
}

#div5, #div6, #div7, #div8{
	float: left;
    width: 55px;
    height: 55px;
    border: 1px solid black;
}

#div9, #div10, #div11, #div12{
	float: left;
    width: 55px;
    height: 55px;
    border: 1px solid black;
}

#div13, #div14, #div15, #div16{
	float: left;
    width: 55px;
    height: 55px;
    border: 1px solid black;
}

.row2 {
	clear: both;
}

.row3 {
	clear: both;
}

.row4 {
	clear: both;
}

body {
  transition: margin .5s;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}
.row {
  width:100%;
  display:inline-block;
  margin-bottom:10px;
}

@media screen and (max-height: 450px) {
  .sidenav {
  padding-top: 15px;
  }

  .sidenav a {
  font-size: 18px;
  }
}

我该如何解决这个问题？

最佳答案

我发现 ev.target 引用了项目被删除的 div，因此 contains('dropzone') 总是返回 true。

this为我工作:

function drag(ev, source) {
    ev.dataTransfer.setData("text", ev.target.id);
    ev.dataTransfer.setData("parent", source.parentNode.tagName);

}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    var parent= ev.dataTransfer.getData("parent");
    // console.log(parent);
    if(parent == "A"){
      el.appendChild(document.getElementById(data).cloneNode(true));
    }
    else{
      ev.target.appendChild(document.getElementById(data));
    }
}

在这里，您可以将拖动项目的parentNode.tagName('a'或'div')存储到dataTransfer中，并在drop()函数中访问它，基于此您可以克隆项目或简单移动它。

关于javascript - 在拖放网格中复制图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41626699/

文章推荐： javascript - 如何在 querySelector 中组合属性和第 n 个类型？

文章推荐： asp.net - 如何在网络表单中包含部分 View

文章推荐： android - 将外部项目包含到 Android 应用程序中

文章推荐： sublimetext2 - 如何将光标放在 Sublime Text 的每一行上？

c# - 属性与 get 之间的区别；放;没有得到；放;
这个问题在这里已经有了答案: Difference between Property and Field in C# 3.0+ (10 个答案) 关闭 10 年前。我不明白静态属性之间的区别: p
jquery拖/放-获取被拖放的元素的id
当元素被拖放时，有没有办法从被拖动的元素中获取 id(或其他属性值)？例如，在左侧，我有一堆 div，我可以将图像放入其中。右边有一个 div 用来保存图像。当我将图像从右侧拖动到左侧的 div 时
c# - 获取问题；放;
每当我更改其中一个类属性时，我想设置一个修改标志，如下所示 public bool Modified { get; set; } public bool Enabled { get; set { Mo
C# HttpClient 放
由于某种原因，我下面的代码曾经可以正常工作，但现在却引发了一个异常: public static async Task HttpPut(string inUrl, string inFilePath)
javascript - 放；在函数定义的末尾
为什么将 ; 放在最佳实践中？在函数定义的末尾。例如 var tony = function () { console.log("hello there"); }; 优于: var tony
bitmap - EaselJS:有问题的拖/放
我在容器内有一个位图。当我拖动容器时，光标变为编辑文本形状，图像也跳到光标的右下角(好像我从左上角拿着图像并拖动它)。这是我的代码，所以你可以看到我有 RTFM: function createIc
c# - 表达式主体属性与 {get;放;}
这个问题已经有答案了: C# 3.0 auto-properties — useful or not? [closed] (17 个回答) 已关闭 6 年前。当我让 Visual Studio 20
c# - 多么简单的得到；放;在一个类意味着？
以类中的以下代码为例: public class Employee : IEntity { public string FirstName { get; set; } public s
javascript - 放(存)json数据
我有 json 数据: { "products": [ { "productId" : 0, "productImg" : "../img/product-ph
c# - { 得到;放; } 在变量声明中
这个问题在这里已经有了答案: What is the difference between a field and a property? (33 个答案) 关闭 9 年前。我在一本书上找到这样声
c# - 得到;放;变量
我正在设置多个方法，想知道如何继续将一个变量(“顶部”变量)传递给不同的方法。主要方法: public static void Main(string[] args) { i
bash - Hadoop Crontab 放
我正在尝试使用 crontab 编写一个简单的任务，将一些文件从本地复制到 HDFS。我的代码是这样的: #!/bing/ksh ANIO=$(date +"%Y") MES=$(date +"%m"
javascript - 限制 jQuery 中节点的拖/放？
有人可以告诉我如何使用这个解决方案来解决我的问题吗？我也想限制 id 中包含文本“not”的节点的拖/放。 jsTree drag and drop restrict folders by class
javascript - jquery sortable 禁用特定项目之间的拖/放
我的情况如下 - 我正在对可能包含链接行的表进行排序: row 1 row 2 row 3 row 4 row 5 我需要的是禁止在.linked-to-p
ASP.net AJAX 拖/放？
我想知道是否有人知道是否有一个预先制定的解决方案:我在 ASP.net 网站上有一个列表，我希望用户能够通过拖放对列表进行重新排序。此外，我希望有第二个列表，用户可以将第一个列表中的项目拖到其中。到
scheme - 放!并在 Scheme 中别名
我在理解似乎不一致的方案中的破坏性操作时遇到问题。即为什么下例中bar没有变化 (define foo '(a b)) (define bar foo) (set! foo '(c d)) foo >
ASP.net AJAX 拖/放？
我想知道是否有人知道是否有一个预先制定的解决方案:我在 ASP.net 网站上有一个列表，我希望用户能够通过拖放对列表进行重新排序。此外，我希望有第二个列表，用户可以将第一个列表中的项目拖到其中。到
scheme - 放!并在 Scheme 中别名
我在理解似乎不一致的方案中的破坏性操作时遇到问题。即为什么下例中bar没有变化 (define foo '(a b)) (define bar foo) (set! foo '(c d)) foo >
c# - 如何使 ModalPopup 拖/放
我在我的 Web 应用程序中使用 Ajax ControlToolkit 中的 ModalPopupExtender。我将其 Drag 属性设置为 true，但是当我拖动弹出面板并将其放到新位置时，它
jQuery UI 拖/放，捕捉到底部
所以，基于this answer ，我有一组可以拖放并卡入到位的 div。唯一的问题是，可拖动的 div 具有不同的高度，我需要它们始终捕捉到目标的底部，而不是顶部。您可以在this JsFiddl

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在拖放网格中复制图像