Как масштабировать изображение до полного размера в div после того, как изображение было перетащено и выбрано?

Мне интересно, можно ли автоматически масштабировать (увеличивать) изображение до полного размера div после того, как изображение было перетащено и опущено на этот div, используя JS/jQuery?Как масштабировать изображение до полного размера в div после того, как изображение было перетащено и выбрано?

* Обратите внимание, что изображение не исчезнет из исходной позиции, скорее копия этого изображения будет перетаскиваться и отбрасываться в div (так что это действительно копия, которую мне нужно масштабировать).

У меня есть текущий код для перетаскивания изображения (см. Ниже), но я не знаю, возможно ли автоматическое масштабирование, и если да, то как ... Спасибо заранее!

<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>

источник

2015-09-19 j-may

Создание [** JSFiddle **] (http://jsfiddle.net) будет более полезным. – vivekkupadhyay

Зачем использовать jQuery, когда вы можете использовать CSS?

img{width:100%;}

источник

2015-09-19 07:15:04 RealWorldCoder

"text" Try подставляя для "Text" на ev.dataTransfer.getData("text");, data для original.src в copyimg.src = data;, установив style свойство #dropBox imgwidth вызывающего 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>

источник

2015-09-19 07:32:22 guest271314

Как масштабировать изображение до полного размера в div после того, как изображение было перетащено и выбрано?

ответ

Смежные вопросы