div를 비어 있지 않으면 html5 끌어서 놓기가 방지됩니다.

Question

간단한 그래픽 생성을 위해 일종의 시각적 인터페이스를 만들려고합니다. 그것은 10 개의 이미지 아이콘과 아이콘을 배치 할 수있는 5 개의 상자로 구성됩니다. 사용자가 표시 할 아이콘 10 개 중 하나를 선택하고 드래그 앤 드롭을 사용하여 적절하게 요소를 정렬 할 수있게하려고합니다. 5 개의 아이콘은 아이콘을 드롭 할 수있는 div 안에 있으므로, 마음이 바뀌고 다른 아이콘을 선택하려는 경우 아이콘을 "집"행으로 되돌릴 수 있습니다. 하지이 간단한 튜토리얼과는 달리,하지만 더 div의 및 아이콘

: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2

내 스크립트를

<script> 
function allowDrop(ev) 
{ 
ev.preventDefault(); 
} 
function drag(ev) 
{ 
ev.dataTransfer.setData("Text",ev.target.id); 
//CSS CHANGES HERE FOR ON PICKUP 
$(".dragfive").css("border", "2px solid #ff9d00"); 
$(".select5").css("border", "2px solid #ff9d00"); 
} 
function drop(ev) 
{ 
ev.preventDefault(); 
var data=ev.dataTransfer.getData("Text"); 
ev.target.appendChild(document.getElementById(data)); 
//CSS CHANGES HERE FOR ON DROP 
$(".dragfive").css("border", "2px solid transparent"); 
$(".select5").css("border", "2px solid transparent"); 
} 
</script> 

내 코드가 정확히 튜토리얼과 동일하지만, 좀 좋은를 추가했습니다 코멘트가 나타내는대로 CSS가 변경됩니다. 사용자가 항목을 배치 할 수있는 위치를 나타내는 다채로운 테두리가 나타납니다. 한 번 떨어 뜨리면 투명 해집니다. 다음을 제외하고 완벽하게 작동합니다 ...

1. 아이콘이 다른 아이콘 위에 떨어지지 않게하려면 어떻게합니까? (또는 단지 빈 div에 아이콘을 놓는 것을 허용합니까?)
2. 두 번째 아이콘 세트를 만들고 프로세스를 복제하고 싶다면 어떻게 그와 허용 된 놓기 영역을 별도로 유지할 수 있습니까? (의도하지 않은 장소에 아이콘이 표시되지 않도록)

감사합니다.

Answer 1

# 1의 경우 drop 기능을 조금 더 지능적으로 만들어야합니다. 그 안에는 자식을 추가하기 전에 childNodes이 없는지 확인하십시오.

# 2의 경우 drag과 drop을 더 지능적으로 만들어야합니다. drag에서 대상을보고 그룹 정보를 설정해야합니다. drop에서 정보가 제대로 일치하는지 확인해야합니다.

function drop(ev) 
{ 
    ev.preventDefault(); 
    if (ev.target.hasChildNodes()) { return; } 
    // ...all the rest as you had it 

이 # 2를 들어, 당신이 아이콘의 두 번째 세트를 정의하는 방법에 따라 좀 더 복잡 할 것이다

내가 좋아하는 당신은 무엇 # 1 찾아야한다 표시 할 수 있습니다.

function drag(ev) 
{ 
    ev.dataTransfer.setData("Text",ev.target.id); 
    // I'm going to assume your group1 items will have "group1" in their id. Set it up however you want. 
    if (ev.target.id.indexOf("group1") != -1) { 
     ev.dataTransfer.setData("Group", 1); 
    } else { 
     ev.dataTransfer.setData("Group", 2); 
    } 
    // ...all the rest as you had it 
} 

function drop(ev) 
{ 
    ev.preventDefault(); 
    if (ev.target.hasChildNodes()) { return; } 
    if (ev.target.id.indexOf("group1") != -1 && ev.dataTransfer.getData("Group") == 2 || 
     ev.target.id.indexOf("group2") != -1 && ev.dataTransfer.getData("Group") == 1) { 
      return; 
     } 
    // ...all the rest as you had it 

Answer 2

나는 결국 내가 아이콘을 잃지 않을 것이다 그래야 단지 드롭 명령의 끝에

ev.target.appendChild(document.getElementById(data).cloneNode(true)); 

를 추가 : 일반적으로,이 같은 코드 모양의 무언가를해야한다. 이것은 의도 한 대상 div의 자식 노드를 기반으로 삭제 된 데이터를 막지 못하기 때문에 1 호 문제를 해결할 수있는 방법입니다.

으로 오버 라이드를 막을 수는 있지만, 내가 원하는 것처럼 드롭을 거부하는 대신 끌어서 놓은 데이터는 여전히 손실됩니다. 대신 위에 코드를 사용하여 복사하는 것이 가장 좋은 해결 방법이었습니다. 요소를 순서대로 삭제하는 문제는 ID의 오타가 원인입니다. 아이콘을 그룹으로 나누는 Scott의 방법은 완벽하게 작동했습니다.

Answer 3

이 스크립트는 내 스크립트에서 효과가 있습니다 ... div의 드롭을 방지하기 위해 이미 이미지에 좋아하는 이미지가 있습니다.

if (ev.target.hasChildNodes()) { 
    ev.target.appendChild(document.getElementById(data)); 
} 

Answer 4

내가 이것을 해결하기 위해 한 것은 어쩌면 이상하지만 작동했습니다! 내가 allowdrop를 호출하기 전에이 함수를 호출

function testDiv(ev, x) { 
    if (x.length > 0) { 
     return false; 
    } 
    else { 
     allowDrop(ev); 
     return true; 
    } 
} 

: 난 그냥이 기능을했다. x은 div 중 innerHTML입니다. 그것은 나를 위해 완벽하게 작동합니다!