Question

大家好，我是jquery的新手。我想创建一个拖放，我可以在特定区域上放置图像，并将图像裁剪为该div的大小，当我在div上放下另一个图像时，必须删除第一个图像。请帮助实现这一目标。如果我不清楚，那么请看一下http://www.shutterfly.com/photo-gifts/custom-iphone-cases，然后选择一个案例并进行个性化，你会得到这个想法。

这是我第一次使用stackoverflow。如果我不清楚，请告诉我。

提前完成。

Answer 1

这是一个使用jquery和jquery-ui的简单示例：

$(document).ready(function(){
$(".image").draggable({
    drag:function(){
        $(this).css({opacity:0.5});
    }
});
$(".container").droppable({
  drop: function( event, ui ) {
    var img = ui.draggable[0];
      var chld = $(this).children().first();
      if(chld && $(chld).hasClass("image")){
          $(chld).css({width:null,height:null});
          $(".images").append(chld);
      }
      $(this).html("");
      $(img).css({opacity:1,width:"100px",height:"100px",top:"0px",left:"0px"});
      $(this).append(img);
   }
});

}）;

请参阅操作中的示例：http://jsfiddle.net/Elak/pfe2p/5/

基本上你只需要控制当图像被放置在“可放置”元素上时会发生什么。

可以通过应用样式来调整大小。您还可以定义一个css类并通过$（..）。addClass（“yourclass”）将其分配给图像，如果要重置图像，则通过.removeClass（“..”）删除该类。在我的例子中，我通过.css（）手动完成，这不是非常“干净”。

注意：在最新的jquery中，拖动图像目前在IE10中不起作用。这就是为什么我使用v1.7

使用jquery进行拖放

1 个答案: