작업할 때 왼쪽에 디자인된 컨트롤을 오른쪽 패널로 드래그해야 하며, 오른쪽 패널의 컨트롤은 자유롭게 정렬되어 있어야 합니다. 이때 드래그 및 정렬 작업을 지원해야 합니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!