przeciągnij i skopiuj HTML5?

Widziałem działający kod dla przeciągania i upuszczania HTML5, ale czy ktoś ma przykład przeciągania i kopiowania? Chcę przeciągnąć element na element drop, ale tylko skopiować element do tej lokalizacji.przeciągnij i skopiuj HTML5?

Źródło

2012-10-22 robotwasp

Akcja spadek zależy wyłącznie od Ciebie. Jeśli chcesz zrobić "kopię", zrób to. – Oded

będę trzymać do przykładu pokazanego tutaj: http://www.w3schools.com/html/html5_draganddrop.asp

Zakładając mamy ten dokument:

<!DOCTYPE HTML> 
<html> 
<head> 
    <script> 
    <!-- script comes in the text below --> 
    </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>

Normalny Przeciągnij & Opadowej

Normal przeciągnij i upuść, posiada takie funkcje przypisane do odpowiednich elementów:

function allowDrop(ev) { 
    /* The default handling is to not allow dropping elements. */ 
    /* Here we allow it by preventing the default behaviour. */ 
    ev.preventDefault(); 
} 

function drag(ev) { 
    /* Here is specified what should be dragged. */ 
    /* This data will be dropped at the place where the mouse button is released */ 
    /* Here, we want to drag the element itself, so we set it's ID. */ 
    ev.dataTransfer.setData("text/html", ev.target.id); 
} 

function drop(ev) { 
    /* The default handling is not to process a drop action and hand it to the next 
    higher html element in your DOM. */ 
    /* Here, we prevent the default behaviour in order to process the event within 
    this handler and to stop further propagation of the event. */ 
    ev.preventDefault(); 
    /* In the drag event, we set the *variable* (it is not a variable name but a 
    format, please check the reference!) "text/html", now we read it out */ 
    var data=ev.dataTransfer.getData("text/html"); 
    /* As we put the ID of the source element into this variable, we can now use 
    this ID to manipulate the dragged element as we wish. */ 
    /* Let's just move it through the DOM and append it here */ 
    ev.target.appendChild(document.getElementById(data)); 
}

Drag & Kopiowanie

Podczas gdy będziesz musiał zmieniać upuść tak, że kopiuje element DOM zamiast przesuwając go.

/* other functions stay the same */ 

function drop(ev) { 
    ev.preventDefault(); 
    var data=ev.dataTransfer.getData("text/html"); 
    /* If you use DOM manipulation functions, their default behaviour it not to 
    copy but to alter and move elements. By appending a ".cloneNode(true)", 
    you will not move the original element, but create a copy. */ 
    var nodeCopy = document.getElementById(data).cloneNode(true); 
    nodeCopy.id = "newId"; /* We cannot use the same ID */ 
    ev.target.appendChild(nodeCopy); 
}

Spróbuj tej strony: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop
A potem dołączania .cloneNode(true) do getElementById(data).

Przełączanie między Kopiuj & Wklej

Można nawet robić takie rzeczy jak w menedżerach plików: Ctrl-Stacyjki z przejściem do kopiowania:

function drop(ev) { 
    ev.preventDefault(); 
    var data=ev.dataTransfer.getData("text/html"); 
    /* Within a Mouse event you can even check the status of some Keyboard-Buttons 
    such as CTRL, ALT, SHIFT. */ 
    if (ev.ctrlKey) 
    { 
    var nodeCopy = document.getElementById(data).cloneNode(true); 
    nodeCopy.id = "newId"; /* We cannot use the same ID */ 
    ev.target.appendChild(nodeCopy); 
    } 
    else 
    ev.target.appendChild(document.getElementById(data)); 
}

Źródło

2012-10-22 09:04:27 Nippey

Dzięki Nippey - to świetnie, że to działa w HTML5! – robotwasp

ev.ctrlKey było tym, czego szukałem! – JohnnyLambada

+1 pomógł mi dzisiaj :) –

Jeśli chciałeś przykład przy użyciu JQuery Mam pod warunkiem this jsFiddle. Zasadniczo wystarczy powiązać zdarzeniai i dropstart dla obiektów DOM. Następnie możesz użyć kompilacji JQuery w metodzie clone(), aby zduplikować element.

JQuery zwraca również swoje własne imprezy wrapper więc trzeba uzyskać originalevent z imprezy JQuery

$('#x').bind('dragstart', function(e) { 
    e.originalEvent.dataTransfer.effectAllowed = 'copy'; 
    e.originalEvent.dataTransfer.setData('Text', '#x'); 
}); 

$('#drop-box').bind('drop', function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 

    $(this).html($(e.originalEvent.dataTransfer.getData('Text')).clone()); 

    return false; 
}).bind('dragover', false);

Źródło

2012-10-22 09:29:30 BeRecursive

Hej, dzięki BeRecursive - to by całkowicie działało! Miałem nadzieję, że wykorzystam natywne funkcje przeciągania i upuszczania w języku HTML5. – robotwasp

Powinny one wiązać się ze zdarzeniami JavaScript HTML5, nie jest to użycie '' przeciągalnego' interfejsu JQueryUI. – BeRecursive

przeciągnij i skopiuj HTML5?

Odpowiedz

Powiązane problemy