응용 프로그램에서 끌어서 놓기를 구현하려고하는데 항목을 추가 할 때 사라질 텍스트가있는 놓기 영역을 식별하려고합니다. 미학을 위해 나는 animate.css의 애니메이션에서 바운스를 사용하여 항목을 추가 할 때 필요에 따라 텍스트를 페이드 인/페이드 아웃하고 싶지만 배경 텍스트가 추가/제거 된 요소의 위치를 방해하지 않도록 정렬 할 수는 없습니다.CSS z- 인덱스가 각진 애니메이션으로 예상대로 작동하지 않습니다.
This plunk illustrates the issue
문제는 이런 종류의 문제를 해결하는 방법에 어떤 아이디어? 나는 z- 인덱스를 존중할 방법을 찾을 수 없습니다. 내 생각은 텍스트를 드롭 존의 배경 이미지로 설정하는 것이지만 더 좋은 방법이 있어야하는 것처럼 느껴집니다.
마지막으로 누군가 AngularJS로 드래그 앤 드롭을합니다. :)
github에서 만들 수 있으며 완료되면 공유 할 수 있습니까?
position:relative 외부 position:absolute 외부로 질문에 답하십시오.
.well {
position: relative;
min-height: 50px;
}
.background {
position: absolute;
top: 0;
left: 10;
margin-top: 15px;
}
지시어로 사용하려면 지시문을 강제해야합니다. 배열의 어떤 요소 (바운스 애니메이션 전에이없는 것처럼 텍스트가 즉시 다시 표시되기 때문에
Plunk에서 배경 텍스트가 절대적으로 배치되지 않은 것처럼 보입니다. 따라서 떨어 뜨린 요소는 컨테이너에서 그 다음에 흐를 것입니다.
당신은 아마도 드롭에 배경 텍스트를 즉시 숨겨야합니다. drop은 Javascript dnd event입니다.
나는,이 솔루션은 드롭 영역을 입력 요소가 아니라 드롭 영역을 떠나 요소 작동 믿는다 끝마친). – bornytm
대단하군요! 도와 줘서 고마워. 또한 드래그 앤 드롭을 쓰지 않았으므로 여기 (github)에서 찾을 수 있습니다 (https://github.com/ganarajpr/angular-dragdrop). 각도 1.2에서 작동하려면 33-37 행을 삭제해야합니다. – bornytm