Проблема с перетаскиваемым клоном

Question

Я хочу перетащить окно изображения в Droppable (таблица) и после этого изменить источник изображения, как в этом примере http://fiddle.jshell.net/c6vL61fb/7/, но есть проблема.

Если я установил ui clone как истинный $ (ui.draggable) .clone (true), то после того, как изображение перетаскивается, я могу щелкнуть по ссылке (ui-icon-folder-open). Однако, когда я перемещаю выпавшее изображение вокруг, исходное изображение перетаскивается вместо скопированного изображения.

Если я не устанавливаю ui clone $ (ui.draggable) .clone(), то после перетаскивания ссылка неактивна, хотя скопированное изображение можно перемещать.

Я также пробовал с ui.helper.clone. Это не решило проблему.

Как исправить эту проблему? Заранее большое спасибо.

HTML

<div id="products"> 
     <p>Toolbox</p> 
     <div id="photo" class="product ui-widget-content"> 
      <img src="http://s29.postimg.org/b347myz5f/Pictures_icon.png" width="96" height="96"></img> 
      <a href="#" title="Change Image" class="ui-icon ui-icon-folder-open">Change Image</a> 
     </div> 
    </div> 
    <br> 
    <br> 
    <div id="cont"> 
     <p>Drop Here</p> 
     <table id="container" width="100%" border="1"> 
      <tr height="100px"> 
       <td id='cell1' class='cell ui-widget-content' width="50%">&nbsp;</td> 
       <td id='cell2' class='cell ui-widget-content' width="50%">&nbsp;</td> 
      </tr> 
      <tr height="100px"> 
       <td id='cell3' class='cell ui-widget-content' width="50%">&nbsp;</td> 
       <td id='cell4' class='cell ui-widget-content' width="50%">&nbsp;</td> 
      </tr> 
     </table> 
    </div> 

Javascript

$(function() { 
    var cnt = 0; 
    $(".cell") 
    .droppable({ 
     activeClass: "ui-state-default", 
     hoverClass: "ui-state-hover", 
     drop: function(event, ui) { 
      cnt++; 
      var self = $(this); 
      var productid = ui.draggable.attr("id"); 
      if (self.find("[id=" + productid + "]").length) return;      


      $(this).append($(ui.draggable).clone(true) 
          .attr('id',ui.draggable.attr('id')+cnt) 
          .removeAttr('style'));     

      var cartid = self.closest('.cell').attr('id'); 
      $(".cell:not(#"+cartid+") [id="+productid+"]").remove(); 
     } 
    }) 
    .sortable(); 

    $(".product").draggable({ 
     appendTo: 'body', 
     helper: 'clone' 
    }); 

    // resolve the icons behavior with event delegation 
    var $img_target = "";   
    $(".product").click(function(event){  
     var $item = $(this), 
      $target = $(event.target); 

     if ($target.is("a.ui-icon-folder-open")){ 
      alert('hi'); 
     } 
     return false; 
    });   
}); 

CSS

#products{ 
    display: inline-block; 
} 
.product { 
    float: left; 
    padding: 0.4em; 
    margin: 0 0.4em 0.4em 0; 
} 
#products .product a { 
    display: none; 
} 
.product img { 
    cursor: move; 
} 

Answer 1

Попытка клонировать без прохождения «Tru е», и добавить событие в документе:

$(document).on('click', '.product', function(event){ ... } 

Fiddle: http://fiddle.jshell.net/ucf83mp2/