我想知道在使用JS / jQuery将图像拖放到该div之后,是否可以自动将图像缩放(增大)到div的完整大小?
*请注意,图像不会从其原始位置消失,而是将该图像的副本拖放到div中(因此它实际上是我需要缩放的副本)。 / p>
我有当前的代码来拖放图像(见下文),但我不知道是否可以自动缩放,如果是,如何...提前谢谢!
<html>
<img id="drag1" src="image.jpg" draggable="true" ondragstart="drag(event)">
<div id="dropBox" ondrop="dropcopy(event)" ondragover="allowDrop(event)"></div>
</html>
<style>
#drag1{width:100px;height:50px;}
#dropBox{width:500px;height:250px;}
</style>
<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");
ev.target.appendChild(document.getElementById(data));
}
function dropcopy(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
var copyimg = document.createElement("img");
var original = document.getElementById(data);
copyimg.src = original.src;
ev.target.appendChild(copyimg);
}
</script>
答案 0 :(得分:0)
为什么在使用CSS时使用jQuery?
img{width:100%;}
答案 1 :(得分:0)
尝试将"text"
替换为"Text"
at
ev.dataTransfer.getData("text");
,data
original.src
copyimg.src = data;
style
#dropBox img
width
window.getComputedStyle()
属性ev.target
<html>
<img id="drag1" src="http://lorempixel.com/100/50"
draggable="true" ondragstart="drag(event)">
<div id="dropBox"
ondrop="dropcopy(event)" ondragover="allowDrop(event)"></div>
<style>
#drag1 {
width: 100px;
height: 50px;
}
#dropBox {
width: 500px;
height: 250px;
border: 1px dotted #000
}
</style>
<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");
ev.target.appendChild(document.getElementById(data));
}
function dropcopy(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var copyimg = document.createElement("img")
copyimg.style.width = window.getComputedStyle(ev.target)
.getPropertyValue("width");
var original = document.getElementById(data);
copyimg.src = data;
ev.target.appendChild(copyimg);
}
</script>
</html>
{ {1}}
public class Main {
public static void main(String[] args) throws ParseException {
SimpleDateFormat sdf_date = new SimpleDateFormat("EEE MMM dd HH:mm:ss zzz yyyy");
Date d = sdf_date.parse("Thu Jan 01 01:32:49 EDT 1970");
System.out.println(d);
}
}
&#13;