오라클의 APEX에서 드래그 가능한 영역

Question

클라이언트 측에서 영역을 이동할 수 있습니까? 나는 페이지 디자이너/그리드 레이아웃과 관련하여 말하고 있지 않습니까?

가능한 경우 문서가없는 것 같습니다.

Answer 1

APEX에서는 "기본 제공"되지 않지만 APEX는 jQuery를 사용하므로 jQuery draggable 기능을 사용하여 쉽게 구현할 수 있습니다. 나는 here on apex.oracle.com을 볼 수있는 예제를 설정했습니다. 이것은 유니버설 테마를 기반으로합니다. 여기

로드로 페이지를 보여주는 스크린 샷이다 나는 오른쪽 하단 아래 영역을 드래그 한 후 :

내가 무슨 짓을했다 :

1. 만들기 템플리트 "속성이있는 공백"및 정적 ID "컨테이너"가있는 "컨테이너"정적 컨텐츠 영역. 이것은 메인 영역을 드래그 할 수있는 영역을 정의합니다. 나는 이것이 없으면 옆에서 옆으로 드래그 될 수 있다는 것을 알았지 만, 아래로 드래그하면 잘려나 갔다.

2. 정적 ID가 "dept-report-rgn"인 "일반"APEX 영역으로 드래그 가능한 영역을 만듭니다. DEPT 테이블을 기반으로하는 고전적인 보고서를 찾아 왔습니다. 나는 그것을 컨테이너 영역의 하위 영역으로 만들고이 CSS 클래스들을 "CSS Classes"속성 ("Appearance"아래)에 할당했습니다 : ui-widget-content draggable-region. ui-widget-content 클래스는 jQuery에서 필요하며 draggable-region은 내 자신의 발명품입니다.

   페이지 속성에서

3. - 나는 다음과 같은 코드를 추가 "자바 스크립트는 페이지가로드 될 때 실행"

   $(function() { $(".draggable-region").draggable(); });

   이 적용 에 jQuery를 draggable 기능 클래스 "드래그 - 지역"어떤 요소를 . 그 대신 클래스 대신 "# dept-report-rgn"을 선택하여 특정 지역을 타겟팅 할 수있었습니다. -

   페이지 속성에서

4. "CSS는 인라인"나는 다음을 추가 :

   #container .container {height: 600px}

   #dept-report-rgn { width: 300px; height: 300px; padding: 0.5em; }

첫 번째 줄은 약간의 수직 공간이 보장되는 드래그 지역 내 이동할 수 있으며, 두 번째는 드래그 가능한 영역 자체의 크기를 지정합니다.

이것은 필요한 것은 아니지만 잘하면 앞으로 나아갈 수있는 방법을 보여줍니다. 또한 jQuery droppable 및 sortable 구성 요소 (예 : jQuery)를 살펴볼 수도 있습니다.