如何在拖放图像后将图像缩放到div上的完整大小?

时间:2015-09-19 07:02:03

标签: javascript jquery html css image

我想知道在使用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>

2 个答案:

答案 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}}

&#13;
&#13;
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;
&#13;
&#13;