Przeciągnij i upuść jest częścią standardu HTML5.
Przeciągnij obraz powyżej do prostokąta.
w HTML
Szczegółowy projekt pracy HTML5 obsługuje przeciągnij. HTML5 obsługuje różne rodzaje przeciąganie i upuszczanie elementów, w tym:
- Przeciągnij i upuść teksty i kody HTML
- elementy HTML przeciągnij i upuść
- Przeciągnij i upuść pliki
W oparciu o działania potrzebne, można stosować jedną z powyższych typów. Zauważ, że gdy element HTML jest przeciągnięty do poruszania swoją obecną pozycję, jego identyfikator jest wysyłany do elementu docelowego macierzystej; więc wysyła tekst i może być uważana za pierwszą grupą.
web-based Aplikacja e-mail Google Gmail obsługuje drag-and-drop zdjęć i załączników w najnowszej przeglądarki Google Chrome i Apple Safari (5.x). Obraz i wyszukiwarka Google obsługuje drag & drop.
Przeciągnij i upuść
Przeciągnij i upuść jest bardzo częstym elementem. To jest, kiedy "grab" obiekt i przeciągnąć go w innym miejscu.
HTML5, przeciągnij i upuść stanowi część standardu, a każdy element może być przyciągany.
Wsparcie przeglądarka
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje przeciągnij i upuść.
| API | |||||
|---|---|---|---|---|---|
| Drag and Drop | 4.0 | 9.0 | 3.5 | 6.0 | 12,0 |
Przeciągnij i upuść HTML Przykład
Poniższy przykład jest prosty przeciągnij i upuść przykład:
Przykład
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html> Spróbuj sam " To może wydawać się skomplikowane, ale pozwala przejść przez wszystkie różne części imprezy przeciągnij i upuść.
Złóż Element Draggable
Przede wszystkim: Aby element przyciągany, ustawić draggable atrybut true :
<img draggable="true">
Co Drag - ondragstart i setData()
Następnie należy określić co powinno się zdarzyć, gdy element jest przeciągany.
W powyższym przykładzie, ondragstart atrybut nazywa funkcja drag(event) , który określa, jakie dane mają być przeciągane.
dataTransfer. setData() dataTransfer. setData() metoda określa typ danych i wartość przeciągany danych:
function drag(ev) {
ev.dataTransfer. setData("text", ev.target.id) ;
}
W tym przypadku typ danych "text" oraz wartość jest identyfikatorem do przesunięcia elementu ("drag1") .
Gdzie Drop - ondragover
ondragover zdarzenie określa, gdzie przeciągnięte dane mogą zostać pominięte.
Domyślnie dane / elementy nie mogą zostać pominięte w innych elementach. Aby umożliwić spadek, musimy uniemożliwić manipulację domyślnego elementu.
Odbywa się to poprzez wywołanie event. preventDefault() event. preventDefault() Sposób ondragover przypadku:
event . preventDefault()
Zrobić drop - ondrop
Kiedy przeciągnięty danych jest odrzucany, zdarzenie drop występuje.
W powyższym przykładzie, ondrop atrybut wywołuje funkcję, drop(event) :
function drop(ev) {
ev. preventDefault() ;
var data = ev.dataTransfer. getData("text") ;
ev.target. appendChild(document.getElementById(data) );
}
Kod wyjaśnił:
- Zadzwoń preventDefault() w celu zapobieżenia obchodzenia się domyślną przeglądarką danych (default is open as link on drop)
- Uzyskaj przeciągane dane z dataTransfer. getData() dataTransfer. getData() metody. Metoda ta zwraca dane, które zostały ustalone dla tego samego typu w setData() Sposób
- Przeciągany danych identyfikator przeciąganego elementu ("drag1")
- Dołącza przeciągany element do drop elementu
Przeciągnij obraz iz powrotem
Jak przeciągać (and drop) obraz iz powrotem między dwoma <div> elementów.