Question

我一直在研究一个新项目，它要求我从左边的div中拖动元素并将它们放到右边的div中。当他们到达右侧时，他们需要增加尺寸并保持这种状态直到被点击。拖放工作正常，但我似乎无法让图像保持新的更大尺寸。

我尝试使用javascript更改我的类，当它被放入所述div时，我正在尝试应用持续时间为9999s的转换来完成我想要做的事情。

有更好的方法吗？我必须想象有。

这是我现在正在使用的代码。

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

的Javascript

 function allowDrop(ev){
    ev.preventDefault();

}
function drag(ev){
    ev.dataTransfer.setData("content", ev.target.id);
}
function drop(ev){
    ev.preventDefault();
    var image= ev.dataTransfer.getData("content");
    ev.target.appendChild(document.getElementById(image));

}

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);
}

Answer 1

我会使用jquery来处理你的mouseup事件（drop的结尾），然后放入一个回调来处理大小的增加，但是要么使用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.
      });
 });

除非我完全误解了你当然的问题

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

1 个答案: