jquery - 使用 jquery 进行高级拖放

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 的原因