个人中心
gpt4 book ai didi

javascript - 拖放不起作用？

转载 作者：行者123 更新时间：2023-11-28 08:37:58 25 4
gpt4 key购买 nike

我是 Javascript 的初学者，我试图让图像进入用 css 制作的边框内，但由于某种原因，脚本无法运行，可能是我在代码或其他东西。

该代码段工作正常，但不显示图像。

“e”是事件的缩写我有一个:拖动(e)允许掉落(e)并放下(e)
谢谢

<!doctype html>
<html>

<head>
  <title>drag and drop</title>

  <style type="text/css">
    #targetDiv {
      margin-left: 300px;
      width: 200px;
      height: 150px;
      padding: 10px;
      border: 1px solid #999999;
    }
  </style>

</head>

<body>
  <h1>drag and drop</h1>

  <div id="targetDiv" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
  <img id="dragItem" src="market-street-car.jpg" width="200" height="150" draggable="true" ondragstart="drag(event)" />

  <script>
    function drag(e) {
      e.dataTransfer.setData("Text", e.target.id);
    }

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

    function drop(e) {
      var dragItem = e.dataTransfer.getData("Text");
      e.preventDefault();
      e.target.appendChild(document.getElementById(dragItem));
    }
//You don't need to edit this one cuz you don't need var var is probably optional 

  </script>

</body>

</html>

最佳答案

这里是更正后的版本。您错过了一个 ) 字符，而我在此处添加了一个 var 表达式:take.ms/el76e 

<!doctype html>
<html>

<head>
  <title>drag and drop</title>

  <style type="text/css">
    #targetDiv {
      margin-left: 300px;
      width: 200px;
      height: 150px;
      padding: 10px;
      border: 1px solid #999999;
    }
  </style>

</head>

<body>
  <h1>drag and drop</h1>

  <div id="targetDiv" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
  <img id="dragItem" src="market-street-car.jpg" width="200" height="150" draggable="true" ondragstart="drag(event)" />

  <script>
    function drag(e) {
      e.dataTransfer.setData("Text", e.target.id);
    }

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

    function drop(e) {
      e.preventDefault();
      var dragItem = e.dataTransfer.getData("Text");
      e.target.appendChild(document.getElementById(dragItem));
    }
  </script>

</body>

</html>

关于javascript - 拖放不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27944065/

25 4 0
文章推荐： javascript - 处理仅适用于 Firefox
文章推荐： objective-c - 如何让编译器看到我的框架 module.modulemap 伞头？
文章推荐： javascript - jcarousel和jquery新添加的脚本冲突
文章推荐： javascript - Ext.Loader.loadScript 回调调用得太早
行者123
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com