Продвижение перетаскивания с jquery

Question

Привет, ребята, я новичок в jquery. Я хочу создать перетаскивание, в котором я могу удалить изображение в определенном регионе, и изображение обрезается до размера этого div, когда я удаляю другое изображение в div, тогда первое изображение должно быть удалено. Пожалуйста, помогите в достижении этого. Если я не ясен, пожалуйста, взгляните на http://www.shutterfly.com/photo-gifts/custom-iphone-cases, а затем выберите случай и перейдите к персонализации, вы получите эту идею.

Это мой первый раз на stackoverflow. Пожалуйста, дайте мне знать, если я не понимаю вас.

Thanx заранее.

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