Conserva l'aspetto dell'elemento A trascinato quando si utilizza l'attributo trascinabile html5

Question

Come posso conservare l'aspetto dell'elemento A trascinato quando si utilizza l'attributo html5 'draggable'. Su alcuni browser (Safari & Chrome) quando trascinano ancora, trascinato aiutante viene sostituito con il browser implementazione nativa di elemento trascinato, come visto in screenshots:

Quando si trascina DIV

Quando si trascina Un

HTML

<div class="draggable">Draggable DIV</div> 
<a href="" class="draggable">Draggable A</a> 

CSS

$('.draggable').attr('draggable', true); 

Ecco la rapida JSBin ho assemblato per dimostrare questo problema http://jsbin.com/pihayeceza/1/edit

Grazie

Answer 1

Questo problema si verifica perché il comportamento predefinito di trascinamento di un legame con un attributo href consiste nel creare un'immagine contenente l'url da utilizzare come segnaposto di trascinamento. Puoi risolvere questo problema rimuovendo l'attributo href, tuttavia, per ovviare a questo senza dover rimuovere l'attributo href puoi usare i gestori di eventi mousedown/up per rimuovere l'attributo e quindi riaggiungerlo, lasciando gli ancorabili cliccabili *.

$('.draggable').attr('draggable', true).on('mousedown', function() { 
 
    if ($(this).is('a')) { 
 
    $(this).data('href', this.href); 
 
    $(this).removeAttr('href'); 
 
    } 
 
}).on('mouseup', function() { 
 
    if ($(this).is('a')) { 
 
    $(this).attr('href', $(this).data('href')); 
 
    } 
 
}).on('click', function() { 
 
    console.log(this.href); 
 
});

.draggable { 
 
    margin: 10px; 
 
    display: block; 
 
    width: 200px; 
 
    background: #fafafa; 
 
    color: #333; 
 
    text-decoration: none; 
 
    height: 40px; 
 
    border: 1px solid #eaeaea; 
 
    line-height: 40px; 
 
    text-align: center; 
 
    cursor: move; 
 
    border-radius: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="draggable">Draggable DIV</div> 
 
    <a href="http://www.google.com" target="_blank" class="draggable">Draggable A</a>

* Nota: frammenti di stack non consentono di seguire il link.

Answer 2

Sono in grado di mantenere l'aspetto dell'elemento trascinato utilizzando DataTransfer.setDragImage. Se posso aggiungere il seguente codice per il codice JavaScript nella tua istanza jsbin, è lavorare per me su Firefox, Chrome e Safari:

$('a.draggable').on('dragstart', function (ev) { 
    var dt = ev.originalEvent.dataTransfer; 
    // In IE browsers, setDragImage does not exist. However, the issue we are 
    // trying to fix does not happen in these broswers. So if setDragImage is not 
    // available, then just don't do anything. 
    if (dt.setDragImage) 
    dt.setDragImage(ev.target, 0, 0); 

}); 

La dataTransfer campo della manifestazione ha un oggetto DataTransfer associato con l'operazione di trascinamento. Devi recuperarlo dall'evento DOM originale piuttosto che dal wrapper evento jQuery, quindi ev.originalEvent.dataTransfer.

Per i browser IE, setDragImage non è presente, ma il problema segnalato nell'interrogazione non si verifica in primo luogo quindi se setDragImage è assente, noi non lo chiamiamo.

A bin con il codice aggiornato.

Answer 3

Avvolgi i tag di ancoraggio con un div e imposta draggable = "false" sul tag di ancoraggio.

<div class="draggable"> 
    <a href="" draggable="false">Draggable A</a> 
</div> 

Sarà necessario styling aggiuntivi per evitare che il pulsante/link di guardare blu e sottolineato.

.draggable a { 
    color: inherit; 
    text-decoration: inherit; 
} 

modificato il jsbin qui http://jsbin.com/rebayif/edit