Zachowaj wygląd przeciąganego elementu podczas używania atrybutu przeciągania html5.

Question

Jak mogę zachować wygląd przeciągniętego elementu podczas używania "przeciągalnego" atrybutu html5. Na niektórych przeglądarek (Safari & Chrome) podczas przeciągania kotwicę, przeciągnięty pomocnik jest zastąpiony przeglądarki natywnej implementacji przeciągnięty elementu, jak widać na screenach:

Podczas przeciągania div

Podczas przeciągania

HTML

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

CSS

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

Oto szybkie JSBin i zmontowane w celu wykazania tej kwestii http://jsbin.com/pihayeceza/1/edit

Dzięki

Answer 1

Ten problem występuje, ponieważ domyślne zachowanie przeciągania link z Atrybut href to utworzenie obrazu zawierającego adres URL, który będzie używany jako symbol zastępczy przeciągania. Możesz to naprawić, usuwając atrybut href, aby obejść to bez konieczności usuwania atrybutu href, który możesz wykorzystać do obsługi zdarzeń mousedown/up, aby usunąć atrybut, a następnie dodać go ponownie, pozostawiając zakotwiczenia * klikalne.

$('.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>

* Uwaga: Fragmenty stack nie pozwala śledzić link.

Answer 2

Jestem w stanie zachować wygląd przeciągniętego elementu za pomocą DataTransfer.setDragImage. Jeśli dodać następujący kod do kodu JavaScript w swojej jsbin przykład to praca dla mnie na Firefox, Chrome i 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); 

}); 

dataTransfer pole razie ma DataTransfer obiektu związanego z operacji przeciągania. Musisz pobrać go z oryginalnego zdarzenia DOM, a nie z opakowania zdarzenia jQuery, czyli ev.originalEvent.dataTransfer.

Dla przeglądarek IE, setDragImage nie jest obecny, ale problem opisana w pytaniu nie występuje w pierwszej kolejności więc jeśli setDragImage jest nieobecny, po prostu nie nazwać.

A bin ze zaktualizowanym kodem.

Answer 3

Zawiń znaczniki zakotwiczenia za pomocą elementu div i ustaw przeciągany znak = "false" na znaczniku zakotwiczenia.

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

Będziesz potrzebować dodatkowej stylizacji, aby przycisk/link nie wyglądał na niebieski i podkreślony.

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

zmodyfikowany jsbin tutaj http://jsbin.com/rebayif/edit