>  기사  >  웹 프론트엔드  >  jQuery UI Draggable + Sortable을 조합하여 사용하는 자세한 예

jQuery UI Draggable + Sortable을 조합하여 사용하는 자세한 예

小云云
小云云원래의
2017-12-29 10:27:261851검색

작업할 때 왼쪽에 디자인된 컨트롤을 오른쪽 패널로 드래그해야 하며, 오른쪽 패널의 컨트롤은 자유롭게 정렬되어 있어야 합니다. 이때 드래그 및 정렬 작업을 지원해야 합니다. jQuery UI Draggable + Sortable의 결합 사용에 대한 기사입니다(예제 설명). 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리도록 하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

데모 스크린샷: 왼쪽 컨트롤에서 오른쪽 영역으로 드래그

코드 조각:

<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();
 
    $(".dragable").draggable({
      connectToSortable: ".sortable",
      helper: "clone",
      // revert: "invalid",
      // handle: ".handle"
    });
  });
</script>

Html 코드:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link href="js/bootstrap/css/bootstrap.css" rel="external nofollow" rel="stylesheet" />
  <link href="js/bootstrap/css/bootstrap-theme.min.css" rel="external nofollow" rel="stylesheet" />
  <link href="css/index.css" 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>
  <p class="container">
    <p class="row">
      <p class="column col-md-6">
        <p class="box_wrap " id="box_wrap1" >
          <p class="box dragable">
            left-test1
          </p>
          <p class="box dragable">
            left-test2
          </p>
          <p class="box dragable">
            left-test3
          </p>
        </p>
      </p>
      <p class="column col-md-6">
        <p class="box_wrap sortable" id="box_wrap2">
          <p class="box">
            test1
          </p>
          <p class="box">
            test2
          </p>
          <p class="box">
            test3
          </p>
        </p>
      </p>
    </p>
  </p>
</body>
</html>

관련 권장 사항:

Yii 프레임워크 개발 튜토리얼 Zii 구성 요소 정렬 가능 예제_PHP 튜토리얼

Yii 프레임워크 개발 튜토리얼 Zii 구성 요소 정렬 가능 예제

jquery_jquery에서 정렬 가능 정렬 후 저장된 상태에 대한 솔루션

위 내용은 jQuery UI Draggable + Sortable을 조합하여 사용하는 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.