jQuery UI Draggable + Sortable을 조합하여 사용하는 자세한 예
- 小云云원래의
- 2017-12-29 10:27:261884검색
작업할 때 왼쪽에 디자인된 컨트롤을 오른쪽 패널로 드래그해야 하며, 오른쪽 패널의 컨트롤은 자유롭게 정렬되어 있어야 합니다. 이때 드래그 및 정렬 작업을 지원해야 합니다. 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으로 문의하세요.