html 요소를 드래그 앤 드롭

문제가 발생했습니다 여기를 드래그하면 Lokesh.exe에 이것을 lokesh.exe로 드래그합니다. 소스 ID가 2 번이지만 destinationid가 null입니다. 상자에 드래그 밀 때 소스 ID 및 대상 ID와 같은 올바른 결과를 제공합니다. 내가 코드를 아래 시도 :html 요소를 드래그 앤 드롭

//html 

<a draggable="true" ondragstart="drag(event)" id="drag-id" >drag-me</a> 
<table> 
    <tr><td id="div1" style=" border: solid 1px; width:100px; height:100px;" ondrop="return drop(event)" ondragover="allowDrop(event)"></td></tr> 
</table> 
<table align="center" class="tabelhead" style="border-collapse: collapse;"> 


    <tr id="1" align="center" ondragover="allowDrop(event)" ondrop="return drop(event)" class="targetdiv" draggable="true" ondragstart="drag(event)"> 
     <td width="500" align="left">Lokesh.exe</td> 
    </tr> 

    <tr id="2" align="center" ondragover="allowDrop(event)" ondrop="return drop(event)" class="targetdiv" draggable="true" ondragstart="drag(event)"> 
     <td width="500" align="left">Drag this to lokesh.exe</td> 
    </tr> 
</table> 

//javascript 



function drag(ev) 
{ 

ev.dataTransfer.setData("Text",ev.target.id); 

} 

function drop(ev) 
{ 
    ev.preventDefault(); 
    //console.log(ev.dataTransfer); 
    var data=ev.dataTransfer.getData("Text"); 
    //ev.target.appendChild(document.getElementById(data)); 
    var sourceid=document.getElementById(data).id; 
    alert("source id:"+sourceid); 
    var destinationid=ev.target.id; 
    alert("destinationid:"+destinationid); 
} 

function allowDrop(ev){ 
ev.preventDefault(); 

}

출처

2014-07-21 Lav Kush

PHP 코드가 올바른 HTML을 생성하는지 브라우저 개발자 도구를 확인하십시오. – dhavalcengg

예. 생성 중입니다. 방화 광구와 develpoper 도구로 확인했습니다. –

경고 대신 소스 및 대상 요소의 콘솔을 수행하고 html로 다시 확인하십시오. – dhavalcengg

대상 tr id를 원하면 다음과 같이하십시오.

var targetTR = ev.target.parentElement; 
var targetId = targetTR.id;

출처

2014-07-21 12:41:13 dhavalcengg

감사합니다. .. –

여기 드래그 할 때 tr 텍스트를 마우스에 첨부하는 방법. –

문제는 당신이 e.target이 <tr> 것으로 예상하지만, 이벤트의 대상이 실제로 id 속성이없는 <td>, 것입니다.

나는 당신의 JS 바이올린 http://jsfiddle.net/ZsjA3/2/를 업데이트하고 무슨 일이 일어나고 있는지 입증하는 콘솔 출력 추가 한 :

console.log(ev.target);

당신이 그것을 실행할 때 디버거의 콘솔이 열려 있는지 확인합니다. 최선의 방법은 이드를 <td>으로 옮기는 것입니다.

출처

2014-07-21 12:06:40 UweB

하지만 ev.target.id도 null입니다. –

예,'ev.target'은 id가없는' '입니다. – UweB

"이것을 lokesh.exe로 드래그하십시오"에서 "Lokesh.exe"로 드래그하여 경고 상자를보십시오. –

html 요소를 드래그 앤 드롭

답변

관련 문제