jQueryUI Sortable 응용 데모(공유)

최근 작업 용 으로 자 유 롭 게 배 치 된 페이지 디자인 을 설계 해 야 합 니 다.저 는 jQuery UI 의 sortable 을 선 택 했 습 니 다.끌 수 있 고 자 유 롭 게 정렬 해서 사용 하기에 편리 합 니 다.demo 를 써 서 기록 을 할 수 있 습 니 다.
첫째,단일 항목 의 자유 정렬
다음 그림 효과

코드 세그먼트:


<script type="text/javascript"> 
 
  $(function () {
    $("#box_wrap").sortable({
      helper: "clone",
      placeholder: "box-holdplace",
      sort: function (e, ui) {
        //       
      },
      // handle: ".handle",//               ，    
    }).disableSelection();   
  });
</script>

html:


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link href="js/bootstrap/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
  <link href="js/bootstrap/css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
  <link href="css/index.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
 
  <script src="js/jquery-1.10.2.min.js"></script>
  <script src="js/bootstrap/js/bootstrap.min.js"></script>
 
  <!--Sortable -->
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>
  <div class="box_wrap" id="box_wrap">
    <div class="box">
      test1
    </div>
    <div class="box">
      test2
    </div>
    <div class="box">test3
    </div>
  </div>
</body>
</html>

둘째,다 중 정렬 그룹 간 자유 드래그

코드 세그먼트:


<script type="text/javascript">
    
  $(function () {
    $("#box_wrap1,#box_wrap2").sortable({
      connectWith: ".box_wrap",
      helper: "clone",
      cursor: "move",//            
      opacity: 0.5, //        
      placeholder: "box-holdplace",//   className，          
    }).disableSelection();
  });
</script>

html 코드:


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link href="js/bootstrap/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
  <link href="js/bootstrap/css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
  <link href="css/index.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" />

  <script src="js/jquery-1.10.2.min.js"></script>
  <script src="js/bootstrap/js/bootstrap.min.js"></script>

  <!--Sortable -->
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

</head>
<body>
  <div class="container">
    <div class="row">
      <div class="column col-md-6">
        <div class="box_wrap" id="box_wrap1">
          <div class="box">
            left-test1
          </div>
          <div class="box">
            left-test2
          </div>
          <div class="box">
            left-test3
          </div>
        </div>
      </div>
      <div class="column col-md-6">
        <div class="box_wrap" id="box_wrap2" >
          <div class="box">
            test1
          </div>
          <div class="box">
            test2
          </div>
          <div class="box">
            test3
          </div>
        </div>
      </div>
    </div>   
  </div>
</body>
</html>

위의 다른 하 나 는 업무 중 에 비교적 자주 사용 하 는 정렬 형식 이다.
이 jQueryUI Sortable 애플 리 케 이 션 데모(공유)는 편집장 님 께 서 공유 해 주신 모든 콘 텐 츠 입 니 다.참고 해 주시 고 많은 사랑 부 탁 드 리 겠 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

jQuery UI Draggable+Sortable 결합 사용(인 스 턴 스 설명)

작업 중 에 왼쪽 에 설 계 된 컨트롤 을 오른쪽 판 넬 로 끌 어 당 기 는 동시에 오른쪽 판 넬 에 있 는 컨트롤 을 자 유 롭 게 정렬 해 야 합 니 다.이 럴 때 드래그 와 정렬 을 지원 하 는 작업 이 필요...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

jQueryUI Sortable 응용 데모(공유)

좋은 웹페이지 즐겨찾기