JavaScript 드래그 앤 드롭 문제

좋아요. 사용자가 텍스트를 추가 할 수있는 JavaScript 페이지를 만들었습니다. 색상과 굵은 기울임 꼴, 크기 및 글꼴을 설정할 수 있습니다. 크기 및 놓기 옵션은 드롭 다운 상자를 통해 선택됩니다. 나는 외모, 단지 기능에 대한 걱정하지 나처럼JavaScript 드래그 앤 드롭 문제

enter image description here

그것은 조금 지저분한 기압을 보인다.

위젯에 표시되는 요소를 추가하면 요소를 화면에 표시된 이미지에 맞게 끌어 놓을 수 있습니다. 사용자가 텍스트의 위치에 만족할 때마다 좌표를 생성하는 저장을 클릭하고 테이블 X 및 Y 좌표 필드를 업데이트합니다.이 시점에서 새 행이 생성되고 새 요소를 추가하는 프로세스를 반복 할 수 있습니다. 그들은 행복 할 때마다 저장을 클릭하고 데이터베이스에 저장하여 나중에 저장되도록 저장합니다.

내 문제는 새로운 텍스트 필드를 추가 할 때마다 특정 양만큼 요소를 푸시 다운한다는 것입니다.

나는 이것은을 위해 잘 작동

decr -= (elementCount* 16);

에 의해 감소하기 위해 설정 한 양만큼 그것을 곱 (그들은 새 레이블 요소를 추가 할 때마다 autoincrements)가에 elementCount 소요 감소하는 변수를 추가하여 정류 보통 텍스트 크기이지만 다른 텍스트 크기와 글꼴 조합을 추가하기 시작하면 요소가 푸시 다운되는 양이 변경되어 추가하는 모든 요소가 악화되고 악화됩니다.

새로운 요소는 매우 동적으로 추가 할 때 만들 수있는 방법이이 튜토리얼

http://luke.breuer.com/tutorial/javascript-drag-and-drop-tutorial.aspx

에 기반 자바 스크립트 코드이

 elementCount++; 

     var Text = textArray[textArray.length-1]; 
     var Font = fontArray[fontArray.length-1]; 
     var Color = colorArray[colorArray.length-1]; 
     var Bold = boldArray[boldArray.length-1]; 
     var Size = sizeArray[sizeArray.length-1]; 
     var Italics = italicsArray[italicsArray.length-1]; 
     var X = xCordArray[xCordArray.length-1]; 
     var Y = yCordArray[yCordArray.length-1]; 

     var newdiv = document.createElement('div'); 
    newdiv.innerHTML = "<span><font color='" + Color + "' size = '" + Size + "' face='" + Font + "'><label class = 'drag2' id = 'text" + firstCount + "'> " + Text + "</label></font></span>"; 
    document.getElementById(divName).appendChild(newdiv); 


     var decr= 32; 
     decr-= (elementCount* 16); 
     Y = parseInt(Y) + test; 
     X = parseInt(X) + 24; 


      document.getElementById("text" + elementCount).style.left = X + "px"; 
      document.getElementById("text" + elementCount).style.top = Y + "px";

드래그 앤 드롭과 같은 추가 새로운 요소가 추가 될 때마다 새로운 요소가 화면에 자동으로 표시되지 않습니다. 나는 지난 몇 일 동안 이것을 고치기 위해 많은 다른 옵션을 시도했고 운이 없었습니다.

편집 CSS 나는 절대 위치로 변경하고 상대 위치 컨테이너 내부를 배치하고 완벽하게 지금 작동

.text1{ 
position: relative; 
left: 0px; 
top: 0px; 

}

출처

2012-04-20 AdamM

새로운'div'는'position : absolute;와 같은 기본 CSS를 가지고 있습니까? 상단 : 0; 왼쪽 : 0;'? 필요한 경우 고유 한'z-index'도 사용하십시오. 절대 위치에 있지 않으면 DOM의 정상적인 흐름을 따르고 그 위치는 다른 요소의 영향을받으며 반대의 경우도 마찬가지입니다. – MrCode

예를 들어 css 요소를 편집하십시오. 저는 친척을 사용하고 있었기 때문에 아마 나쁜 생각 일 것입니다. 절대적으로 시험해보고 차이가 있는지 확인합니다. – AdamM

텍스트 요소에 대한 모든 도움에 미리 감사드립니다!

출처

2012-04-23 18:55:04 AdamM

JavaScript 드래그 앤 드롭 문제

답변

관련 문제