HTML5ドラッグ＆コピー？

HTML5ドラッグ＆ドロップの作業コードを見たことがありますが、ドラッグ＆コピーの例は誰でもありますか？私は、要素をドロップ要素にドラッグしたいが、その要素をこの位置にコピーしたい。HTML5ドラッグ＆コピー？

2012-10-22 robotwasp

からoriginaleventを取得する必要がありますので、それが自身のイベントラッパーです返します。あなたが "コピー"をしたい場合は、それを行います。 – Oded

私はここに示した例に固執します：http://www.w3schools.com/html/html5_draganddrop.asp

私たちは、この文書を持っていると仮定すると：

<!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>

ノーマルドラッグ&ドロップ

通常のドラッグ＆ドロップは、このような機能を持っていますそれぞれの要素に割り当てられる：

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)); 
}

ドラッグ&コピー

あなたはそれをコピーDOM要素の代わりに、それを動かすように、ドロップ機能を変更する必要がありますに対し。 http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop
をそして.cloneNode(true)getElementById(data)にを追加します。

/* 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); 
}

このページを試してみてください。あなたも、ファイルマネージャのようなものを行うことができ

コピー&間

スイッチが貼り付け：Ctrlキースイッチをコピーへの移動から：あなたは私が持っているjQueryのを使用した例を望んでいた場合

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)); }

出典

2012-10-22 09:04:27 Nippey

Nippeyさん、ありがとうございました - これはHTML5で実際に動作するのは素晴らしいです！ – robotwasp

ev.ctrlKeyが私が探していたものでした！ – JohnnyLambada

+1今日助けました:) –

提供されたthis jsFiddle。基本的には、DOMオブジェクトのdrop,dragover、dropstartイベントにバインドするだけで済みます。次に、clone()メソッドでJQueryのビルドを使用して、要素を複製することができます。

jQueryのはまた、あなたがドロップアクションは完全にあなた次第です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);

出典

2012-10-22 09:29:30 BeRecursive

こんにちは、ありがとうBeRecursive - これは完全に動作します！私はHTML5のネイティブドラッグアンドドロップ機能を使用したいと考えていました。 – robotwasp

これらはHTML5のJavascriptイベントにバインドする必要があります。これはJQueryUIの '' draggable''インターフェースを使用していません。 – BeRecursive

HTML5ドラッグ＆コピー？

答えて

関連する問題