html로 드래그 가능한 요소가 겹치지 않도록하는 방법

동적으로 생성 된 div를 드래그하는 텍스트 상자를 만들었습니다. 하지만 div를 다른 div에 놓으면 중복됩니다. 나는 그들을 수직으로 배열해야한다. jQuery에서 많은 솔루션을 발견했지만 일반 javaScript가 필요합니다. 제발 도와주세요. 내가 사용하고html로 드래그 가능한 요소가 겹치지 않도록하는 방법

HTML :

<div id="area1" align="center" ondrop="drop(event)" ondragover="allowDrop(event)" ></div>

CSS는 내가 사용하고 있습니다 :

#area1 { 
    float:left; 
    width:25%; 
    height:240px; 
    padding:10px; 
    border:1px solid #A485D8; 
    margin-left: 10px; 
    margin-right: 10px; 
    padding-top:10px; 
}

출처

2012-12-03 CodingDecoding

"javascript"접근 방식은 이미 jQuery에서 제공하는 기능을 다시 작성하는 것을 포함합니다. jQuery를 대신 사용하는 것이 잘못된 이유는 무엇입니까? –

예. 나는 초보자이다. 그래서 처음부터 전혀 몰랐습니다. 지금은 그것을 바꿀 수 없다 – CodingDecoding

4 년 전에 한 질문. 아직 대답하지 못했습니다. 아무데도이 문제에 대한 좋은 해결책을 찾았습니다. 자바 스크립트로 HTML5 드래그 드롭은 재앙이라고 생각합니다. 'draggable = "true"'가있는 요소는 드래그 가능한 다른 요소 이벤트로 드롭되지만,'dradable'도'ondragover' 이벤트도 설정되어 있지 않습니다. –

이것은 단지 원시 코드입니다. 나는 그것을 시험하지 않았다. 하지만 도움이 될 수 있습니다 :

#area1 * 
{ 
    position:relative; 
    display:block; 
}

출처

2012-12-03 12:55:26

변경 사항이 없습니다. 여전히 겹침 – CodingDecoding

드래그 가능한 요소의 html로 질문을 업데이트 할 수 있습니까? –

문제는 속성 draggable="true"와 요소가 유사한 (드래그) 요소에 떨어지고 있다는 점이다.

어떻게 든 ondrop 이벤트의 동일한 기능이 드래그 가능한 요소에도 적용되는 것 같습니다.

이 문제를 방지하려면 ondrop 이벤트에 대해 호출되는 함수에서 조건을 추가해야합니다. 다음은 그 예입니다. 내 경우

<div id="area1" align="center" ondrop="drop(event)" ondragover="allowDrop(event)" ></div> 

function drop(ev) 
{ 
if(ev.target.className=='into' || ev.target.className=='options_list') 
    { 
    var incoming_id = ev.dataTransfer.getData("incoming_choice") 
    ev.preventDefault(); 
    ev.target.appendChild(document.getElementById(incoming_id)); 
    } 
}

, 난 드래그 할 수있는 요소는 그 className'options_list' 또는 'into' 중 하나 인 요소 삭제 얻을 싶어요. 다른 draggable에 떨어 뜨려서는 안됩니다. 내 코드에서 draggables의 className은 'match_choice'입니다. 마찬가지로 className 대신 id을 사용하여 비교할 수 있습니다.

출처

2017-03-18 17:25:43

html로 드래그 가능한 요소가 겹치지 않도록하는 방법

답변

관련 문제