Latest web development tutorials

jQuery를 UI 예 - 정렬 (정렬 가능한)

정렬 된 목록 또는 그리드 요소를 조정하는 마우스를 사용합니다.

정렬 상호 작용에 대한 자세한 내용은 API 문서를 참조 정렬 위젯 (위젯을 정렬) .

기본 기능

정렬 기능은 모든 DOM 요소에 사용할 수 있습니다. 클릭하고 새로운 위치의 요소 목록에 마우스를 드래그, 기타 항목이 자동으로 조정됩니다. 기본적으로 정렬 각 항목은 공유 draggable 속성을. 

<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
  <메타 문자 집합 = "UTF-8">
  <제목> jQuery를 UI 정렬 (정렬 가능한) - 기본 기능 </ 제목>
  <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
  <스타일>
  #sortable {목록 스타일 타입 : 없음; 여백 : 0; 패딩 : 0; 폭 : 60 %;}
  #sortable 리 {마진 : 0 3px의 3px의 3px의; 패딩 : 0.4em; 패딩 왼쪽 : 1.5em; 글꼴 크기 : 1.4em; 높이 : 18px;}
  #sortable 리 범위 {위치 : 절대; 마진 왼쪽 : -1.3em;}
  </ 스타일>
  <스크립트>
  $ (함수 () {
    $ ( "#sortable") .sortable ();
    $ ( "#sortable") .disableSelection ();
  });
  </ 스크립트>
</ 헤드>
<바디>
 
<UL 아이디 = "정렬">
  <리 클래스 = "UI 상태 기본"> <스팬 클래스 = "UI-아이콘 UI를-아이콘 - arrowthick-2-NS"> </ SPAN> 상품 1 </ 리>
  <리 클래스 = "UI 상태 기본"> <스팬 클래스 = "UI-아이콘 UI를-아이콘 - arrowthick-2-NS"> </ SPAN> 상품 2 </ 리>
  <리 클래스 = "UI 상태 기본"> <스팬 클래스 = "UI-아이콘 UI를-아이콘 - arrowthick-2-NS"> </ SPAN> 항목 3 </ 리>
  <리 클래스 = "UI 상태 기본"> <스팬 클래스 = "UI-아이콘 UI를-아이콘 - arrowthick-2-NS"> </ SPAN> 항목 4 </ 리>
  <리 클래스 = "UI 상태 기본"> <스팬 클래스 = "UI-아이콘 UI를-아이콘 - arrowthick-2-NS"> </ SPAN> 항목 5 </ 리>
  <리 클래스 = "UI 상태 기본"> <스팬 클래스 = "UI-아이콘 UI를-아이콘 - arrowthick-2-NS"> </ SPAN> 항목 6 </ 리>
  <리 클래스 = "UI 상태 기본"> <스팬 클래스 = "UI-아이콘 UI를-아이콘 - arrowthick-2-NS"> </ SPAN> 상품 7 </ 리>
</ UL>
 
 
</ BODY>
</ HTML>

연결 목록

바이 connectWith 반대로 다른 정렬 된리스트 내의 요소를 두는 선택 옵션을 전달하고. 가장 쉬운 방법은 CSS 클래스의 모든 관련 그룹의 목록이며, 다음 정렬 기능 (예를 들어,에 클래스를 전달 connectWith: '.myclass' ). 

<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
  <메타 문자 집합 = "UTF-8">
  <제목> jQuery를 UI 정렬 (정렬 가능한) - 연결 목록 </ 제목>
  <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
  <스타일>
  # Sortable1, #의 sortable2 {목록 스타일 타입 : 없음; 여백 : 0; 패딩 : 0 0 2.5em; 플로트 : 왼쪽; 마진 오른쪽 : 10px를;}
  # Sortable1 리, #의 sortable2 리 {마진 : 0 5px 5px 5px; 패딩 : 5px; 글꼴 크기 : 1.2em; 폭 : 120 픽셀;}
  </ 스타일>
  <스크립트>
  $ (함수 () {
    $ ( "# Sortable1, #의 sortable2") .sortable ({
      connectWith ".connectedSortable"
    .}) DisableSelection ();
  });
  </ 스크립트>
</ 헤드>
<바디>
 
<UL 아이디 = "sortable1"클래스 = "connectedSortable">
  <리 클래스 = "UI 상태 기본"> 항목 1 </ 리>
  <리 클래스 = "UI 상태 기본"> 항목 2 </ 리>
  <리 클래스 = "UI 상태 기본"> 항목 3 </ 리>
  <리 클래스 = "UI 상태 기본"> 항목 4 </ 리>
  <리 클래스 = "UI 상태 기본"> 항목 5 </ 리>
</ UL>
 
<UL 아이디 = "sortable2"클래스 = "connectedSortable">
  <리 클래스 = "UI 상태-강조"> 항목 1 </ 리>
  <리 클래스 = "UI 상태-강조"> 항목 2 </ 리>
  <리 클래스 = "UI 상태-강조"> 항목 3 </ 리>
  <리 클래스 = "UI 상태-강조"> 항목 4 </ 리>
  <리 클래스 = "UI 상태-강조"> 항목 5 </ 리>
</ UL>
 
 
</ BODY>
</ HTML>

연결 목록 탭

반대로 또 다른 정렬 된리스트 내의 요소를 넣고, 적절한 탭리스트 아이템의 상단에 배치함으로써. 

<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
  <메타 문자 집합 = "UTF-8">
  <제목> jQuery를 UI 정렬 (정렬 가능한) - 탭 연결 목록 </ 제목>
  <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
  <스타일>
  # Sortable1 리, #의 sortable2 리 {마진 : 0 5px 5px 5px; 패딩 : 5px; 글꼴 크기 : 1.2em; 폭 : 120 픽셀;}
  </ 스타일>
  <스크립트>
  $ (함수 () {
    $ ( "# Sortable1, #의 sortable2") .sortable () disableSelection ();
 
    var에 $의 탭 =의 $ ( "#tabs") .tabs ();
 
    var에 $ tab_items = $ ( "UL : 첫 번째 리", $ 탭) {(.droppable
      동의 : ".connectedSortable 리를"
      hoverClass "UI 상태-가져가"
      드롭 : 함수 (이벤트, UI)를 {
        var에 $ 항목 = $ (이);
        var에 $ 목록 = $ ($ item.find ( "A") .attr ( "HREF"))
          .find ( ".connectedSortable");
 
        ui.draggable.hide은 ({) (함수를 "느린"
          $ Tabs.tabs ( "옵션", "활성", $의 tab_items.index ($ 항목));
          $ (이) .appendTo ($ 목록) .show ( "느린");
        });
      }
    });
  });
  </ 스크립트>
</ 헤드>
<바디>
 
<사업부 아이디 = "탭">
  <UL>
    <리> <a href="#tabs-1"> 눈크 tincidunt </A> </ 리>
    <리> <a href="#tabs-2"> Proin 슬픔 </A> </ 리>
  </ UL>
  <사업부 아이디 = "탭-1">
    <UL 아이디 = "sortable1"클래스 = "connectedSortable UI 헬퍼 리셋">
      <리 클래스 = "UI 상태 기본"> 항목 1 </ 리>
      <리 클래스 = "UI 상태 기본"> 항목 2 </ 리>
      <리 클래스 = "UI 상태 기본"> 항목 3 </ 리>
      <리 클래스 = "UI 상태 기본"> 항목 4 </ 리>
      <리 클래스 = "UI 상태 기본"> 항목 5 </ 리>
    </ UL>
  </ DIV>
  <사업부 아이디 = "탭-2">
    <UL 아이디 = "sortable2"클래스 = "connectedSortable UI 헬퍼 리셋">
      <리 클래스 = "UI 상태-강조"> 항목 1 </ 리>
      <리 클래스 = "UI 상태-강조"> 항목 2 </ 리>
      <리 클래스 = "UI 상태-강조"> 항목 3 </ 리>
      <리 클래스 = "UI 상태-강조"> 항목 4 </ 리>
      <리 클래스 = "UI 상태-강조"> 항목 5 </ 리>
    </ UL>
  </ DIV>
</ DIV>
 
 
</ BODY>
</ HTML>

지연 시작

시간 지연 및 정렬 실수를 방지하는 거리만큼 지연된. 에 의해 delay (밀리 초) 옵션은 일종의 끌기 시작하기 전에 설정해야합니다. 으로 distance 픽셀 옵션은 일종의 끌기 시작하기 전에 설정해야합니다. 

<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
  <메타 문자 집합 = "UTF-8">
  <제목> jQuery를 UI 정렬 (정렬 가능한) - 지연 시작 </ 제목>
  <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
  <스타일>
  # Sortable1, #의 sortable2 {목록 스타일 타입 : 없음; 여백 : 0; 패딩 : 0; 마진 - 하단 : 15 픽셀; 줌 : 1;}
  # Sortable1 리, #의 sortable2 리 {마진 : 0 5px 5px 5px; 패딩 : 5px; 글꼴 크기 : 1.2em; 폭 : 95 %;}
  </ 스타일>
  <스크립트>
  $ (함수 () {
    $ ( "# Sortable1") .sortable ({
      지연 : 300
    });
 
    $ ( "# Sortable2") .sortable ({
      거리 : 15
    });
 
    $ ( "리튬") .disableSelection ();
  });
  </ 스크립트>
</ 헤드>
<바디>
 
<H3 클래스 = "문서"> 시간 지연이 300ms : </ H3>
 
<UL 아이디 = "sortable1">
  <리 클래스 = "UI 상태 기본"> 항목 1 </ 리>
  <리 클래스 = "UI 상태 기본"> 항목 2 </ 리>
  <리 클래스 = "UI 상태 기본"> 항목 3 </ 리>
  <리 클래스 = "UI 상태 기본"> 항목 4 </ 리>
</ UL>
 
<H3 클래스 = "문서"> 거리 지연 15 픽셀 : </ H3>
 
<UL 아이디 = "sortable2">
  <리 클래스 = "UI 상태 기본"> 항목 1 </ 리>
  <리 클래스 = "UI 상태 기본"> 항목 2 </ 리>
  <리 클래스 = "UI 상태 기본"> 항목 3 </ 리>
  <리 클래스 = "UI 상태 기본"> 항목 4 </ 리>
</ UL>
 
 
</ BODY>
</ HTML>

그것은 격자로 표시됩니다

동일한 크기와 부동 디스플레이와 CSS를 사용하도록 정렬 항목, 그리드로 표시됩니다 보자. 

<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
  <메타 문자 집합 = "UTF-8">
  <제목> jQuery를 UI가 (정렬 가능한) 정렬 - 그리드를 표시 </ 제목>
  <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
  <스타일>
  #sortable {목록 스타일 타입 : 없음; 여백 : 0; 패딩 : 0; 폭 : 450 픽셀;}
  #sortable 리 {:; : 1 픽셀; 플로트 : 마진 패딩에는 3px 3px의 0 3px의 왼쪽, 폭 : 100 픽셀, 높이 90 픽셀, 글꼴 크기 : 4em; 텍스트 정렬 : 센터;}
  </ 스타일>
  <스크립트>
  $ (함수 () {
    $ ( "#sortable") .sortable ();
    $ ( "#sortable") .disableSelection ();
  });
  </ 스크립트>
</ 헤드>
<바디>
 
<UL 아이디 = "정렬">
  <리 클래스 = "UI 상태 기본"> 1 </ 리>
  <리 클래스 = "UI 상태 기본"> 2 </ 리>
  <리 클래스 = "UI 상태 기본"> 3 </ 리>
  <리 클래스 = "UI 상태 기본"> 4 </ 리>
  <리 클래스 = "UI 상태 기본"> 5 </ 리>
  <리 클래스 = "UI 상태 기본"> 6 </ 리>
  <리 클래스 = "UI 상태 기본"> 7 </ 리>
  <리 클래스 = "UI 상태 기본"> 8 </ 리>
  <리 클래스 = "UI 상태 기본"> 9 </ 리>
  <리 클래스 = "UI 상태 기본"> 10 </ 리>
  <리 클래스 = "UI 상태 기본"> 11 </ 리>
  <리 클래스 = "UI 상태 기본"> 12 </ 리>
</ UL>
 
 
</ BODY>
</ HTML>

자리 배치

새 위치에 정렬 항목을 드래그하면 다른 항목은 항목을위한 공간을 만들 것입니다. 질문 placeholder 빈 비주얼 스타일의 클래스를 정의 전송 옵션을 선택합니다. 부울 값은 forcePlaceholderSize 개체 틀의 크기를 설정하는 옵션을 선택합니다. 

<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
  <메타 문자 집합 = "UTF-8">
  <제목> jQuery를 UI 정렬 (정렬 가능한) - 위치 지정자 </ 제목>
  <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
  <스타일>
  #sortable {목록 스타일 타입 : 없음; 여백 : 0; 패딩 : 0; 폭 : 60 %;}
  #sortable 리 {마진 : 0 5px 5px 5px; 패딩 : 5px; 글꼴 크기 : 1.2em; 높이 : 1.5em;}
  HTML> 신체 #sortable 리 {높이 : 1.5em; 라인 - 높이 : 1.2em;}
  .ui-상태 강조 {높이 : 1.5em; 라인 - 높이 : 1.2em;}
  </ 스타일>
  <스크립트>
  $ (함수 () {
    {(.sortable $ ( "#sortable")
      자리 표시 자 : "UI 상태 강조 표시"
    });
    $ ( "#sortable") .disableSelection ();
  });
  </ 스크립트>
</ 헤드>
<바디>
 
<UL 아이디 = "정렬">
  <리 클래스 = "UI 상태 기본"> 항목 1 </ 리>
  <리 클래스 = "UI 상태 기본"> 항목 2 </ 리>
  <리 클래스 = "UI 상태 기본"> 항목 3 </ 리>
  <리 클래스 = "UI 상태 기본"> 항목 4 </ 리>
  <리 클래스 = "UI 상태 기본"> 항목 5 </ 리>
  <리 클래스 = "UI 상태 기본"> 항목 6 </ 리>
  <리 클래스 = "UI 상태 기본"> 항목 7 </ 리>
</ UL>
 
 
</ BODY>
</ HTML>

처리 빈 목록

로 옵션 설정 false 별도 빈리스트에 배치 된 모든 항목의 목록을 방지하기. 기본적으로 정렬 항목은 빈 목록에 배치 할 수 있습니다. 

<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
  <메타 문자 집합 = "UTF-8">
  <제목> jQuery를 UI 정렬 (정렬 가능한) - 빈 목록을 처리 </ 제목>
  <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
  <스타일>
  # Sortable1, #의 sortable2, #의 sortable3 {목록 스타일 타입 : 없음; 여백 : 0; 패딩 : 0; 플로트 : 왼쪽; 마진 오른쪽 : 10px를; 배경 : #eee을; 패딩 : 5px; 폭 : 143px를}
  # Sortable1 리, #의 sortable2 리, #의 sortable3 리 {여백 : 5px; 패딩 : 5px; 글꼴 크기 : 1.2em; 폭 : 120 픽셀;}
  </ 스타일>
  <스크립트>
  $ (함수 () {
    .sortable $ ( "Ul.droptrue"() {
      connectWith "UL"
    });
 
    .sortable $ ( "Ul.dropfalse"() {
      connectWith "UL"
      dropOnEmpty : 거짓
    });
 
    $ ( "# Sortable1, #의 sortable2, #의 sortable3") .disableSelection ();
  });
  </ 스크립트>
</ 헤드>
<바디>
 
<UL 아이디 = "sortable1"클래스 = "droptrue">
  <리 클래스 = "▽를 국가 기본"> 배치 할 수 있습니다 .. </ 리>
  <리 클래스 = "UI 상태 기본"> .. 빈 목록 </ 리>
  <리 클래스 = "UI 상태 기본"> 항목 3 </ 리>
  <리 클래스 = "UI 상태 기본"> 항목 4 </ 리>
  <리 클래스 = "UI 상태 기본"> 항목 5 </ 리>
</ UL>
 
<UL 아이디 = "sortable2"클래스 = "dropfalse">
  <리 클래스 = "UI 상태-하이라이트"> 배치 할 수 없습니다 .. </ 리>
  <리 클래스 = "UI 상태-강조"> .. 빈 목록 </ 리>
  <리 클래스 = "UI 상태-강조"> 항목 3 </ 리>
  <리 클래스 = "UI 상태-강조"> 항목 4 </ 리>
  <리 클래스 = "UI 상태-강조"> 항목 5 </ 리>
</ UL>
 
<UL 아이디 = "sortable3"클래스 = "droptrue">
</ UL>
 
<br style="clear:both">
 
 
</ BODY>
</ HTML>

항목 포함 / 제외

에 의해 지정 items 항목을 정렬 할 수있는 jQuery를 선택 옵션을 전달합니다. 이 옵션은 프로젝트를 정렬 할 수없는 외부에 있지만 유효한 대상 정렬 항목이 없습니다.

당신은 정렬 된 특정 항목을 방지하려면 cancel JQuery와 선택기를 전달하는 옵션을 선택합니다. 취소 된 항목은 여전히 ​​유효 정렬 대상 다른 항목입니다. 

<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
  <메타 문자 집합 = "UTF-8">
  <제목> jQuery를 UI 정렬 (정렬 가능한이) - 포함 / 항목을 제외 </ 제목>
  <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
  <스타일>
  # Sortable1, #의 sortable2 {목록 스타일 타입 : 없음; 여백 : 0; 패딩 : 0; 줌 : 1;}
  # Sortable1 리, #의 sortable2 리 {마진 : 0 5px 5px 5px; 패딩 : 3px의; 폭 : 90 %;}
  </ 스타일>
  <스크립트>
  $ (함수 () {
    $ ( "# Sortable1") .sortable ({
      항목 : "리 :하지 (.ui-상태 사용 안 함)"
    });
 
    $ ( "# Sortable2") .sortable ({
      취소 ".ui 상태 비활성화"
    });
 
    $ ( "# Sortable1 리, #의 sortable2 리") .disableSelection ();
  });
  </ 스크립트>
</ 헤드>
<바디>
 
<H3 클래스 = "문서"> 정렬되는 항목 지정 : </ H3>
 
<UL 아이디 = "sortable1">
  <리 클래스 = "UI 상태 기본"> 항목 1 </ 리>
  <리 클래스 = "UI 상태 기본 UI 상태 비활성화"> (I가 정렬 또는 드롭 대상이 아니에요) </ 리>
  <리 클래스 = "UI 상태 기본 UI 상태 비활성화"> (I가 정렬 또는 드롭 대상이 아니에요) </ 리>
  <리 클래스 = "UI 상태 기본"> 항목 4 </ 리>
</ UL>
 
<H3 클래스 = "워드 프로세서"> 주문을 취소 (하지만 놓기 대상으로 사용) : </ H3>를
 
<UL 아이디 = "sortable2">
  <리 클래스 = "UI 상태 기본"> 항목 1 </ 리>
  <리 클래스 = "UI 상태 기본 UI 상태 비활성화"> (I가 정렬 아니에요) </ 리>
  <리 클래스 = "UI 상태 기본 UI 상태 비활성화"> (I가 정렬 아니에요) </ 리>
  <리 클래스 = "UI 상태 기본"> 항목 4 </ 리>
</ UL>
 
 
</ BODY>
</ HTML>

포털 구성 요소 (포틀릿)

포털 구성 요소 (스타일 사업부) 정렬로 사용하고, 사용 connectWith 정렬 열 사이의 통신을 허용하는 옵션을 선택합니다. 

<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
  <메타 문자 집합 = "UTF-8">
  <제목> jQuery를 UI가 (정렬 가능한) 정렬 - 포털 구성 요소 (포틀릿) </ 제목>
  <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <스크립트 SRC = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <링크 REL = "스타일 시트"HREF = "http://jqueryui.com/resources/demos/style.css">
  <스타일>
  몸 {
    최소 폭 : 520px;
  }
  .column {
    폭 : 170px;
    플로트 : 왼쪽;
    패딩 바닥 : 100 픽셀;
  }
  .portlet {
    여백 : 0 1em의 1em 0;
    패딩 : 0.3em;
  }
  .portlet 헤더를 {
    패딩 : 0.2em 0.3em;
    마진 - 하단 : 0.5em;
    위치 : 상대;
  }
  .portlet - 토글 {
    위치 : 절대;
    최고 : 50 %;
    오른쪽 : 0;
    여백 - 가기 : -8px;
  }
  .portlet 콘텐츠를 {
    패딩 : 0.4em;
  }
  .portlet-자리 {
    국경 : 1 픽셀 점선 블랙;
    여백 : 0 1em의 1em 0;
    높이 : 50 픽셀;
  }
  </ 스타일>
  <스크립트>
  $ (함수 () {
    $ ( ".column") .sortable ({
      connectWith ".column"
      처리 : ".portlet 헤더를"
      취소 ".portlet-전환을"
      자리 표시 자 : "포틀릿 자리 UI 코너 - 모든"
    });
 
    $ ( ".portlet")
      .addClass ( "UI 위젯 UI 위젯 콘텐츠 UI 헬퍼 - clearfix UI 코너 모두")
      .find ( ".portlet 헤더")
        .addClass ( "UI 위젯 헤더 UI 코너 모두")
        .prepend ( "<스팬 클래스 = '▽를-아이콘 UI를-아이콘 - minusthick 포틀릿-전환'> </ SPAN>");
 
    $ ( ".portlet-전환") .click (함수 () {
      VAR 아이콘 = $ (이);
      icon.toggleClass ( "UI-아이콘 - minusthick UI-아이콘 - plusthick");
      ( ".portlet 콘텐츠")를 .toggle를 ( ".portlet") .find icon.closest ();
    });
  });
  </ 스크립트>
</ 헤드>
<바디>
 
<사업부 클래스 = "열">
 
  <사업부 클래스 = "포틀릿">
    <사업부 클래스 = "포틀릿 헤더"> 구독 </ DIV>
    <사업부 클래스 = "포틀릿 콘텐츠"> LOREM의 ipsum의 슬픔은 consectetuer adipiscing ELIT </ DIV>, AMET 앉아
  </ DIV>
 
  <사업부 클래스 = "포틀릿">
    <사업부 클래스 = "포틀릿 헤더"> 뉴스 </ DIV>
    <사업부 클래스 = "포틀릿 콘텐츠"> LOREM의 ipsum의 슬픔은 consectetuer adipiscing ELIT </ DIV>, AMET 앉아
  </ DIV>
 
</ DIV>
 
<사업부 클래스 = "열">
 
  <사업부 클래스 = "포틀릿">
    <사업부 클래스 = "포틀릿 헤더"> 카트 </ DIV>
    <사업부 클래스 = "포틀릿 콘텐츠"> LOREM의 ipsum의 슬픔은 consectetuer adipiscing ELIT </ DIV>, AMET 앉아
  </ DIV>
 
</ DIV>
 
<사업부 클래스 = "열">
 
  <사업부 클래스 = "포틀릿">
    <사업부 클래스 = "포틀릿 헤더"> 링크 </ DIV>
    <사업부 클래스 = "포틀릿 콘텐츠"> LOREM의 ipsum의 슬픔은 consectetuer adipiscing ELIT </ DIV>, AMET 앉아
  </ DIV>
 
  <사업부 클래스 = "포틀릿">
    <사업부 클래스 = "포틀릿 헤더"> 이미지 </ DIV>
    <사업부 클래스 = "포틀릿 콘텐츠"> LOREM의 ipsum의 슬픔은 consectetuer adipiscing ELIT </ DIV>, AMET 앉아
  </ DIV>
 
</ DIV>
 
 
</ BODY>
</ HTML>