先進的拖放jquery

你好傢伙我是jquery的新手。我想創建一個拖放功能，在該功能中，我可以在特定區域上放置圖像，並將圖像裁剪爲該div的大小，當我在div上放置另一個圖像時，必須刪除第一個圖像。請幫助實現這一點。如果我不清楚，那麼請看看http://www.shutterfly.com/photo-gifts/custom-iphone-cases，然後選擇一個案例，並進行個性化，你會得到這個想法。先進的拖放jquery

這是我第一次在stackoverflow。請讓我知道如果我不清楚你。

Thanx提前。

來源

2013-09-21 engg.keshav

這裏是使用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

來源

2013-09-21 17:27:07 MichaC

先進的拖放jquery

回答

相關問題