ajax에 들어 가지 않고 HTML 입력 필드 행을 재주문하는 방법

StackOverflow https://stackoverflow.com/questions/1414594

  •  06-07-2019
  •  | 
  •  

문제

최종 사용자가 재정렬 할 수 있기를 원합니다. Ajax를 사용하고 싶지 않지만 JavaScript에서는 괜찮습니다.

나는 각 행의 측면에 화살표 버튼을 놓아서 괜찮습니다. 누르면 눌렀을 때 필드를 위아래로 움직입니다.

Ajax와의 문제는이 기능에 대해서는 너무 무겁다는 것입니다 (50-60KB). Yahoo 코드 (Yui)를 살펴 보았지만 다시 한 번 특정 기능에 대해 과도하게 보입니다. 나는 이것을 찾았다 - http://www.danvk.org/wp/dragtable/ - 가장 가벼운 코드처럼 보이지만 열의 재정렬 만 허용합니다.

나는 마지막 옵션을 연구 할 것이지만, 나는 이것을 수행하는 방법에 대한 다른 생각 / 접근 방식에 열려 있습니다 (즉, 사용자가 행 현장 필드를 재정렬 할 수 있도록).

추신 :이 토론에는 중요하지 않지만 PHP를 사용하여 이러한 HTML 텍스트 필드를 생성합니다.

도움이 되었습니까?

해결책

Josef의 답변에 추가 ...

에 따르면 W3C DOM 레벨 2 핵심 사양:

삽입

기존 자식 노드 리커 틀 전에 노드 뉴 차일드를 삽입합니다. [...] Newchild가 이미 나무에 있으면 먼저 제거됩니다.

따라서 전화 할 필요가 없습니다 removeChild() 전화하기 전에 insertChild().

또한 IE6 DOM 지원은 매우 나쁘기 때문에 특정 코드를 작성해야 할 수도 있습니다. 아니면이 브라우저를 지원하는 데 시간을 낭비하지 않고 사용자에게 업그레이드를 요청하십시오. 또는 IE6을 실제로 지원 해야하는 경우 JavaScript 라이브러리 (jQuery와 같은)를 사용하는 것이 쉬운 솔루션이 될 수 있습니다.

편집하다: 이것은 Josef의 답변을 기반으로 한 최종 JavaScript 솔루션입니다.

function up(row) {
    var prevRow = row.previousSibling;
    if(prevRow) {
        row.parentNode.insertBefore(row, prevRow);
    }
}

다른 팁

이 기능과 유사한 자바 스크립트 기능을 쓸 수 있습니다.

function up(row) {
    var prevRow = row.previousElementSibling;
    if(prevRow != null) {
        row.parentNode.removeChild(row);
        document.body.insertBefore(row, prevRow);
    }
};

다음과 같이 행에 사용하십시오.

<p>
    <input type="text"/>
    <a onclick="up(this.parentNode)">Up</a>
</p>

나는 당신이 이와 같은 매우 간단한 작업을 위해 JavaScript 프레임 워크를 참조 할 필요가 없다는 것에 동의합니다.

당신은 혼란스러워 보입니다. Ajax는 실제로 새 페이지를로드하지 않고 하위 요청을 통해 서버에서 추가 컨텐츠를로드하기 위해 JavaScript를 사용하는 것을 참조하는 일반적인 용어입니다. AJAX 요청을 처리 할 수있는 다양한 JavaScript 라이브러리가 있습니다.

아마도 당신은 "ajax"라고 말할 때 jQuery와 같은 가장 인기있는 라이브러리 중 하나를 생각하고 있습니까?

귀하의 질문에 관해서는, 기억해야 할 한 가지는 적절한 서버 구성을 사용하면 클라이언트 브라우저가 첫 번째 요청 후 일반 캐시 JavaScript 라이브러리를 사용한다는 것입니다. 따라서 일관된 전체로드 시간은 해당 라이브러리의 크기에 영향을받지 않습니다. 첫 번째 페이지로드 만 있습니다. 사용하는 경우조차도 피할 수 있습니다 jQuery의 Google 호스팅 사본, 이는 대부분의 사이트 방문자에 의해 이미 캐싱 될 가능성이 높습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top