Impossible de faire glisser l'image avec le lien d'ancrage dans Chrome ou IE

Question

Cela va être assez difficile à expliquer, j'ai donc mis en place un JsFiddle pour aider à démontrer. http://jsfiddle.net/j5TKr/

J'ai essayé d'inclure tout ce dont j'avais besoin sans trop le compliquer. L'objectif général est d'avoir une liste de li qui peuvent être sélectionnés (clic simple, Ctrl-clic, Maj-clic) ou double-cliqué pour être ouvert. Les li sélectionnés peuvent être déplacés (afin qu'ils puissent être déplacés dans d'autres dossiers). Le JsFiddle n'a pas les li être regroupés correctement, mais je ne suis pas inquiet à ce sujet car il fonctionne correctement.

Le problème que j'ai est que dans Google Chrome et IE (et éventuellement d'autres navigateurs - pas Firefox) vous ne pouvez pas faire glisser les « s autour li en utilisant l'image dans l'ancre. Ou plus précisément, dans Chrome, il ne traîne pas jusqu'à ce que vous relâchiez le bouton de la souris. Si je supprime l'image (le lien texte "Celui-ci fonctionne") cela fonctionne. Si vous faites glisser en utilisant les informations d'image sous l'ancre réelle, cela fonctionne aussi.

Je suppose que c'est un problème de vouloir que je puisse cliquer et sélectionner li sans ouvrir les liens.

Désolé, c'est un peu déroutant. Je vais répondre à toutes les questions qui se posent.

Answer 1

Voici une solution de contournement HTML efficace dans IE et Google Chrome.

au lieu de marquer vos éléments draggable comme autant:

<div class="icon"> 
    <a title="assets" href="[link]"> 
    <img src="[image]" /> 
    </a> 
</div> 

les annoter comme ceci:

<div 
    class="icon" 
    style="width: 90px; height: 90px; background: url('[image]')"> 
</div> 

(Vous pouvez, bien sûr, séparer le CSS ajouté du HTML.)