Javascript 如何在div中拖放和缩放图像并保持相同的大尺寸？

我一直在做一个新项目，它要求我将元素从左侧的div拖动到右侧的div。当它们到达右侧时，它们需要增大尺寸并保持这种状态，直到单击为止。拖放操作很好，但我似乎无法使图像保持新的较大尺寸

当我的类被放入上述div中时，我尝试用javascript更改它，目前我正尝试应用一个持续时间为9999秒的转换来完成我想要做的事情

有更好的方法吗？我不得不想象有

这是我正在使用的代码

Html

<div class="grow" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img/mountains.jpg" draggable="true" ondragstart="drag(event)" width="336" height="69">

CSS

#div1 {
width:500px;
height:200px;
padding:10px;
border:1px solid #aaaaaa;}
/* 2D TRANSITIONS */
/* Grow */
.grow {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s; 
-webkit-transition-duration: 9999s;
-webkit-transition-property: transform;
transition-property: transform;
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow:hover, .grow:focus, .grow:active {
-webkit-transform: scale(1.1); 
transform: scale(1.9);
}

---

我将使用jquery来处理mouseup事件（放置的末尾），然后放入回调来处理大小的增加，但可以使用animate，也可以使用addClass添加带有新维度的预制类

 $('#drag1').mousemove( function() {
      // make sure you bind the mouseup after the mousemove has occured
      $('#drag1').mouseup( function(){
           $(this).animate({width: '+=100', height: '+=100'}); // or whatever you want.
      });
 });

---

除非我完全误解了你的问题，否则如果没有一些实际的代码，当然不可能知道你在说什么。做一个小例子，把它贴在JSFiddle或类似的东西上。发布相关代码，甚至更好地创建一个。对不起，当我不小心把我的问题先发布时，我正处于发布代码的中间。你能为此创建一个JsFoDLE吗？我不太确定你想要什么。您的问题提到将图像从一个div移动到另一个div，尽管您的图像不在div中，并且您只有一个div。您说绑定鼠标是什么意思？我一直在玩弄这段代码，但我不知道该在哪里声明它。我的意思是，一旦移动处理程序被激活，您就需要绑定mouseup侦听器，因此它只有在mousemove正在进行时才会触发

 $('#drag1').mousemove( function() {
      // make sure you bind the mouseup after the mousemove has occured
      $('#drag1').mouseup( function(){
           $(this).animate({width: '+=100', height: '+=100'}); // or whatever you want.
      });
 });