contenu modifiable div html

Question

<div contenteditable="true" class="dropZone"></div> 

<div class="imageHolder"> 
    <div class="droppedImage"></div> 
</div> 

J'ai le code html ci-dessus. Il y a peut-être quelques divs 'dropZone' sur la page. Mais chacun est a l'événement suivant lié:

$('#lightbox').find('.dropZone').each(function(){ 
    $(this).mouseover(function(){ 
     // check the asset is an image 
     if($(this).find('img').length > 0){ 
      var src = $(this).find('img').first().attr('src'), 
       masterTestVal = 'mydomain'; 
      $(this).empty(); 

      // check the asset is from the image bin 
      if(src.search(masterTestVal) > 0){ 
       var that = $(this).siblings('.imageHolder').find('.droppedImage'), 
        img = '<img src="'+src+'"/>'; 
       that.html(img); 
      } else { 
       alert('Only images from your image bin are accepted here.'); 
      } 
     } else { 
      if($(this).html().length > 0){ 
       alert('Only images from your image bin are accepted here.'); 
       $(this).empty(); 
      } 
     } 
    }); 
}); 

L'idée est simple, un utilisateur peut glisser-déposer une image de leur « bin image » une autre div chargée sur la page peuplée avec quelques images pré-chargées. Lorsque l'utilisateur fait glisser une image sur une div 'drop zone', le js ci-dessus entre, si l'image provient de mon domaine, alors cette image est copiée dans la div 'dropImage'.

Cela fonctionne parfaitement bien, mais en chrome et safari, l'utilisateur ne peut effectuer cette action qu'une seule fois. En firefix, je peux répéter l'action sans fin. Mais en chome et safari on a l'impression qu'après une goutte l'attr contenteditable est perdu ou quelque chose?

Quelqu'un a-t-il des idées?

Merci, John

js violon - http://jsfiddle.net/n6EgH/1/

Answer 1

Kooilnc Votre réponse se sent vraiment bien, en utilisant le comportement de glisser-déposer, mais pour l'instant je n'ai pas encore trouvé le temps de comprendre la traînée

En tant que correctif de bodge, j'ai trouvé une solution de contournement, mais j'ai tout simplement supprimé la div de zone de dépôt en Q et l'ai remplacée par une nouvelle version plus rebond les événements après une img drop . donc genre de débutez tout recommencer: S

// check the asset is from the image bin 
         if(src.search(masterTestVal) > 0){ 
          var that = $(this).siblings('.imageHolder').find('.droppedImage'), 
           img = '<img src="'+src+'"/>'; 
          that.html(img); 
          $(that).attr('contenteditable','true') 
          var newDropBin = $('<div contenteditable="true">'); // <= replacing the original drop zone here 
          $(this).replaceWith(newDropBin); 
          $(newDropBin).addClass('drop-zone'); 
          dropImg.init(); 
         } 

http://jsfiddle.net/n6EgH/4/

Answer 2

au lieu de $ (ce) .mouseover, essayez de lier mouseover sur cette div. Je pense que cela fonctionnerait. Utilisez $ (this) .bind ('mouseover', function() ..