Javascript 在放置时采用图像大小-6ren

Javascript 在放置时采用图像大小

转载作者：太空宇宙更新时间：2023-11-04 10:40:49

正如您在下面的代码中看到的，我想将图像拖到 ID“centerimg”。我隐藏了几张图片，因为这些图片会采用中心图片。问题是它不适应中心图像的大小。它采用被拖动图像的大小。我已经尝试通过 DOM 元素操纵它的 CSS，唯一改变它大小的图像是被拖动的初始图像。

function doFirst() {
  mypic = document.getElementById('img1');
  mypic.addEventListener("dragstart", startDrag, false);

  mypictwo = document.getElementById('img2');
  mypictwo.addEventListener("dragstart", startDrag2, false);

  mypicthree = document.getElementById('img3');
  mypicthree.addEventListener("dragstart", startDrag3, false);

  mypicfour = document.getElementById('img4');
  mypicfour.addEventListener("dragstart", startDrag4, false);

  centerbox = document.getElementById("mainbox");
  centerbox.addEventListener("dragenter", function(e) {
    e.preventDefault();
  }, false);
  centerbox.addEventListener("dragover", function(e) {
    e.preventDefault();
  }, false);
  centerbox.addEventListener("drop", dropped, false);
}

//--------------startDrag FUNCTIONS -----------------------//
function startDrag(e) {
  var code = '<img id="img1" src="images/ph1.jpg">';
  e.dataTransfer.setData('Text', code);
}

function startDrag2(e) {
  var code = '<img id="img2" src="images/ph2.jpg">';
  e.dataTransfer.setData('Text', code);
}

function startDrag3(e) {
  var code = '<img id="img2" src="images/ph3.jpg">';
  e.dataTransfer.setData('Text', code);
}

function startDrag4(e) {
    var code = '<img id="img2" src="images/ph4.jpg">';
    e.dataTransfer.setData('Text', code);
  }
  //--------------startDrag FUNCTIONS -----------------------//

function dropped(e) {
  e.preventDefault();
  centerbox.innerHTML = e.dataTransfer.getData('Text');
}

function drop(event) {

}


window.addEventListener("load", doFirst, false);

	

#centerimg {
    width: 500px;
    height: 500px;
}

#img2, #img1, #img3, #img4 {
    width: 150px;
    height: 150px;
}

#img5 {
    visibility: hidden;
}

.changeimagesize {
    height: 500px;
    width: 500px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
  <script src="drag.js"></script>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-3" id="1box">
        <img id="img1" src="images/image1.jpg">
      </div>
      <div class="col-md-3" id="2box">
        <img id="img2" src="images/image2.jpg">
      </div>
      <div class="col-md-3" id="3box">
        <img id="img3" src="images/image4.jpg">
      </div>
      <div class="col-md-3" id="4box">
        <img id="img4" src="images/image5.jpg">
      </div>




    </div>
  </div>
  <div class="row">
    <center>
      <div class="col-md-push-4 col-md-4 mainbox" ondrop="drop(event)" id="mainbox">
        <img id="centerimg" src="images/center.png">
      </div>
    </center>
  </div>

  <!-- hidden images here-->
  <img id="img5" class="img5" src="images/ph1.jpg">
  <img id="img5" class="img5" src="images/ph2.jpg">
  <img id="img5" class="img5" src="images/ph3.jpg">
  <img id="img5" class="img5" src="images/ph4.jpg">
  <img id="img5" class="img5" src="images/ph5.jpg">
  <!--end of hidden images-->
</body>

</html>

最佳答案

可能的解决方案:在 dropped 函数中强制新的 img 标签获得 500px 的宽度和高度。在这个解决方案中，我对宽度和高度进行了硬编码，但我认为也有可能克服这个问题。

function doFirst() {
  mypic = document.getElementById('img1');
  mypic.addEventListener("dragstart", startDrag, false);

  mypictwo = document.getElementById('img2');
  mypictwo.addEventListener("dragstart", startDrag2, false);

  mypicthree = document.getElementById('img3');
  mypicthree.addEventListener("dragstart", startDrag3, false);

  mypicfour = document.getElementById('img4');
  mypicfour.addEventListener("dragstart", startDrag4, false);

  centerbox = document.getElementById("mainbox");
  centerbox.addEventListener("dragenter", function(e) {
    e.preventDefault();
  }, false);
  centerbox.addEventListener("dragover", function(e) {
    e.preventDefault();
  }, false);
  centerbox.addEventListener("drop", dropped, false);
}

//--------------startDrag FUNCTIONS -----------------------//
function startDrag(e) {
  var code = '<img id="img1" src="images/ph1.jpg">';
  e.dataTransfer.setData('Text', code);
}

function startDrag2(e) {
  var code = '<img id="img2" src="images/ph2.jpg">';
  e.dataTransfer.setData('Text', code);
}

function startDrag3(e) {
  var code = '<img id="img2" src="images/ph3.jpg">';
  e.dataTransfer.setData('Text', code);
}

function startDrag4(e) {
    var code = '<img id="img2" src="images/ph4.jpg">';
    e.dataTransfer.setData('Text', code);
  }
  //--------------startDrag FUNCTIONS -----------------------//

function dropped(e) {
  e.preventDefault();
  centerbox.innerHTML = e.dataTransfer.getData('Text'); console.log(centerbox);
  centerbox.getElementsByTagName("img")[0].style.width = "500px";
  centerbox.getElementsByTagName("img")[0].style.height = "500px";
}

function drop(event) {

}


window.addEventListener("load", doFirst, false);

#centerimg {

	  width: 500px;

	  height: 500px;

	}

	#img2,

	#img1,

	#img3,

	#img4 {

	  width: 150px;

	  height: 150px;

	}

	#img5 {

	  visibility: hidden;

	}

	.changeimagesize {

	  height: 500px;

	  width: 500px;

	}

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
  <script src="drag.js"></script>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-3" id="1box">
        <img id="img1" src="images/image1.jpg">
      </div>
      <div class="col-md-3" id="2box">
        <img id="img2" src="images/image2.jpg">
      </div>
      <div class="col-md-3" id="3box">
        <img id="img3" src="images/image4.jpg">
      </div>
      <div class="col-md-3" id="4box">
        <img id="img4" src="images/image5.jpg">
      </div>




    </div>
  </div>
  <div class="row">
    <center>
      <div class="col-md-push-4 col-md-4 mainbox" ondrop="drop(event)" id="mainbox">
        <img id="centerimg" src="images/center.png">
      </div>
    </center>
  </div>

  <!-- hidden images here-->
  <img id="img5" class="img5" src="images/ph1.jpg">
  <img id="img5" class="img5" src="images/ph2.jpg">
  <img id="img5" class="img5" src="images/ph3.jpg">
  <img id="img5" class="img5" src="images/ph4.jpg">
  <img id="img5" class="img5" src="images/ph5.jpg">
  <!--end of hidden images-->
</body>

</html>

关于Javascript 在放置时采用图像大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35827346/

文章推荐： linux - awk 字符串搜索并替换为附加的递增数字

文章推荐： ffmpeg - 如何使用 FFmpeg 连接两个 MP4 文件？

文章推荐： python - 以 python 呈现，但不以 kivy 语言呈现

c++ - 可变参数推导指南不是由 g++ 采用，由 clang++ 采用 - 谁是正确的？
考虑以下代码: template struct list { template list(Args...) { static_assert(sizeof..
c++ - 可变参数推导指南不是由 g++ 采用，由 clang++ 采用 - 谁是正确的？
考虑以下代码: template struct list { template list(Args...) { static_assert(sizeof..
OpenGL 4 采用
最近才开始学习"new"OpenGL(可编程而不是固定功能，我从 Nehe 教程中学到的)，我想知道自从 OpenGL 4 发布以来学习 OpenGL 3 是否真的有用。我问的原因是因为我想知道能够
企业解决方案中的 ORM 采用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
c++ - 采用 VectorXf 并可以修改其值的函数
我想了解如何操作特征向量/矩阵。我想实现最小二乘高斯牛顿算法(因此我学习使用 Eigen 库)。我有一个 1x6 的参数 vector ，每次迭代都需要更新它们。现在，我只想弄清楚函数如何将 vect
敏捷(Scrum)采用——进展如何？
关闭。这个问题是opinion-based 。目前不接受答案。想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 5 年前。 Improv
java - 采用 Enum 参数的静态方法
我发现编写适用于Enums的静态方法非常困难。这是一个非常人为的示例，但假设您想要编写一个方法，该方法采用 Enum 常量并返回下一个声明的常量。我发现(大约一个小时后)你可以按如下方式进行。它可以工
Cython:将指针传递给函数中的指针，采用 void **
我正在尝试编写一个函数，在某些条件下，将指向结构的指针更改为指向不同的结构。我的限制是我想保留初始函数签名，该签名将指向指针(而不是特定结构类型)的通用指针作为参数。这行不通: [nav] In
python - 采用 Keras 变分自动编码器对图像进行去噪
我正在尝试将 Keras 示例改编为 VAE https://blog.keras.io/building-autoencoders-in-keras.html 我修改了代码，使用有噪声的 mnist
java - JPA 采用(与孤儿移除相反)
自 JPA 2.0 以来，关系上有 orphanRemoval 属性，它极大地简化了父子关系的更新，并且与级联删除一起允许删除树的整个分支并轻松删除它。但是，也有一些情况可能被标记为“收养”，即您将
c++ - 采用 lambda 的模板类的类型推导
我正在尝试编写一个类，它能够在以后及时调用不带参数的 lambda。我期待 C++17 类模板参数推导以避免需要工厂函数。但是，尝试在不指定类型的情况下实例化对象会失败。我可以很好地使用工厂功能，但我
c++ - 采用 Enum 参数的工厂函数
我怎样才能避免并非所有控制路径都在此处返回容器的事实: enum Type {Int, String}; Container containerFactory(Type
c++ - 采用 vector 参数的函数模板回文
我开始学习 C++ 和 STL。我有一个问题: 写一个函数模板palindrome，接受一个 vector 参数并返回true或false来检查 vector 是否是回文(12321是回文，1234
python:采用 Tkinter 入口值
我一直在尝试获取一个条目值(代码中的 S1)以将其自身设置为一个值(_attributes 字典中的 STR)，但我就是无法让它工作。我想让它成为一个最终的顶层循环，但我在这方面一步一步来，因为我是一
javascript - 采用 ISO8601 日期格式的两个日期之间的天数
我想做同样的事情 How do I get the number of days between two dates in JavaScript? 但我想对此日期格式执行相同操作:2000-12-31
c++ - 采用 auto_ptr 的构造函数
我想编写一个带有构造函数的 C++ 类，该构造函数将 auto_ptr 作为其参数，以便我可以将类实例从 auto_ptr 初始化为另一个实例: #include class A { public:
c++ - 采用 2D 输入并同时按行排序的最快方法
我需要一种方法，我可以在其中获取二维数组中的输入并以最快的方式之一对其进行逐行排序。我尝试使用 Insertion Sort 同时获取 Input 和 Sort it。我使用的第二件事是我单独为一行取
c# - 采用 IDisposable 模式
好的，我已经阅读了一些关于 IDisposable 最佳实践的文章，我想我基本上明白了(终于)。我的问题与从 IDisposable 基类继承有关。我看到的所有示例都在子类中一遍又一遍地编写相同的代
c++ - 采用 const 参数的默认移动构造函数
定义类时，以下是否有效？ T(const T&&) = default; 我正在阅读移动构造函数 here并且它解释了如何仍然可以隐式声明默认值: A class can have multiple
c++ - LoadLibrary 采用 LPCTSTR
我想使用 LoadLibrary 开发一个插件系统。我的问题是:我希望我的函数采用 const char* 而 LoadLibrary 采用 LPCTSTR。我有一个聪明的想法来做(LPCSTR)

太空宇宙

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

Javascript 在放置时采用图像大小