html5를 사용하여 다른 끌어서 놓기 이미지의 복사본을 어떻게 끌어 놓을 수 있습니까?

Question

예제를 사용하여 업로드 목적으로 끌어서 놓기를 사용하는 구현이 있습니다. http://robertnyman.com/html5/fileapi-upload/fileapi-upload.html

이것이 작동하는 모습입니다.

• 드래그 앤 드롭하기 전에 : 후 http://cl.ly/image/0c3f1m0M2K2D
• 드래그 앤 드롭 : http://cl.ly/image/0Z131N333n0L

droparea 내가 dropArea 전화 사업부입니다.

이제 드래그 앤 드롭 한 4 개의 이미지 중 문제가 발생했습니다. 그 중 2 개를 특수 상태로 선택하려고했습니다. 예를 들어 이미지 1과 3이 몰래 살도록 서버에 알려야합니다.

나는이 그려 div의

http://cl.ly/image/3T3O410X2E40

나는 지금까지이 작업을 수행 할 수 없습니다입니다 실현으로 끌어 div 요소에 이미 이미지 1과 3을 드롭 할 수 있어야합니다.

dropArea div에서 생성 된 이미지에 ondragstart 속성을 추가 할 수없는 주요 이유는 다음과 같습니다.

draggable 속성을 추가 할 수 있습니다.

그래서 나는 dropArea div로 드래그 앤 드롭 한 후 이렇게 읽는 HTML 코드를 얻습니다.

설명한대로 효과를 얻을 수 있습니까?

드래그 앤 드롭을 사용하지 않고 동일한 결과를 얻는 다른 방법이 있습니까? 드래그 앤 드롭 이미지를 마우스 오른쪽 버튼으로 클릭하고 몰래 사용하도록 선택할 수 있습니까?

업데이트 : id 속성을 추가해야하므로 dropArea 내부의 다른 드래그 앤 드롭 이미지의 드래그 앤 드롭 효과가 적용됩니다.

복사 원본 이미지가 아니라 끌어 놓기를 원합니다. 그러므로 나는 아직도 이것에 도움이 필요하다.

Answer 1

이 당신은 드래그 앤 드롭 이미지

사용에 http://www.w3schools.com/html5/html5_draganddrop.asp에서 복사 한 다음 자바 스크립트 기능을 고유 id 속성을 할당하는 것이 확인이 답변

1. -2 부분이지만라는 새로운 하나를 포함

dropcopy 이들은 W3Schools의 예에서 함수는

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

0

이것은 당신이

<div id="div2" class="sneaks" ondrop="dropcopy(event)" 
       ondragover="allowDrop(event)"></div> 

Answer 2

나는이 질문에 4 년 이상 실현 ondrop 속성의 dropcopy를 사용하십시오 사본을 요구 사업부에 대한 다음 dropcopy

    function dropcopy(ev) 
        { 
        ev.preventDefault(); 
        var data=ev.dataTransfer.getData("Text"); 
        var copyimg = document.createElement("img"); 
        var original = document.getElementById(data); 
        copyimg.src = original.src; 
        ev.target.appendChild(copyimg); 

        } 

에 대한 새로운 하나입니다 예전이지만 다른 사람이이 정보를 필요로 할 수도 있습니다 :)

그래서 Kim Stacks에 대한 의견에 shrishaster가 대답했습니다. 답변 : "이미지 대신 텍스트에 대해 어떻게 할 수 있습니까?" 이렇게함으로써 원래 paragraf 내용 :

내가이 뜻을 희망의 클론을

function dropcopy(ev) 
{ 
ev.preventDefault(); 
var data=ev.dataTransfer.getData("Text"); 
var copyimg = document.createElement("p"); 
var original = document.getElementById(data); 
copyimg.innerHTML = original.innerHTML; 
ev.target.appendChild(copyimg); 

} 

:

이에 대한 수정은 김 스택에 의해 주어진 dropcopy 기능에 대한 사소한 팅겨입니다 적어도 일부는 도와주세요.