HTML 5 여러 이미지 드래그 앤 드롭

사용자가 두 div 사이에서 이미지를 드래그 앤 드롭 할 수있는 간단한 기능을 만들려고합니다. 내가 겪고있는 문제는 다른 이미지 위에 이미지를 드래그하면 해당 이미지 태그 안에 끝납니다.HTML 5 여러 이미지 드래그 앤 드롭

현재 오류 볼 수 있습니다 http://codepen.io/anon/pen/smgyd

내가 일하고자하는 이미지가 당신이 다른 위에 하나를 끌어 후에도 서로 아래에 앉아 있다는입니다.

나는 내 문제를 분명히 밝히기를 바랍니다. 어떤 조언을 크게 주시면 감사하겠습니다. 고맙습니다.

출처

2014-02-26 Lysergix

여기에 코드를 추가하십시오.

스크립트 당신이 원하는 것을 정확하게 수행합니다

function drop(ev) 
{ 
    ev.preventDefault(); 
    var data=ev.dataTransfer.getData("Text"); 
    ev.target.appendChild(document.getElementById(data)); 
}

마우스가 ev.target이 이미지와 동일한 이미지 위에있는 상태에서 이미지를 삭제합니다. 현재 대상의 원하는 드롭 싱크를 찾아야합니다.

당신이 jQuery를 사용할 수 있다면 당신은 바닐라 JS에 있기 때문에 당신이 $.closest("div");을 사용할 수 있습니다, 여기에 수도가이 작업에 당신을하는 데 도움이되는 스레드 : Finding closest element without jQuery

출처

2014-02-26 15:04:20

이 답변 주셔서 감사합니다,하지만 난 정직 경우 내 JS 기술은 끔찍합니다. HTML5 및 JS를 통해 드래그 앤 드롭 방식의 W3 메서드를 사용하고 있습니다. 내가 무엇을 바꿔야하는지 정확히 알겠습니까? 아기 인 것에 대한 사과, 정말 도움을 주시면 고맙겠습니다. – Lysergix

당신은 아기가 아닙니다. 이것은 쉬운 일이 아닙니다. 배우려면이 일을합니까? 당신은 jQuery + jQuery-Ui를 사용할 수 있습니다. https://jqueryui.com/droppable/ –

내 웹 사이트에 div에있는 이미지 목록을 가지고있어서 사용자가 다른 div에 드래그 할 수 있기를 원합니다. 그 div를 인쇄하십시오. 기본적으로 그들은 아이템의 배낭을 만들고 그것을 인쇄하고 있습니다. 따라서 하나의 div는 "Backpack"및 다른 "Items"라고합니다. jQuery 링크를 살펴 보겠습니다. 도와 줘서 고마워. – Lysergix

HTML 5 여러 이미지 드래그 앤 드롭

답변

관련 문제