jqueryUI_jquery의 드래그 앤 드롭 정렬 예제 분석

예시 참고http://jsfiddle.net/KyleMit/Geupm/2/ (이 사이트는 FQ가 필요한 사이트입니다.)

사실 jqueryUI 공식 장바구니 드래그 앤 드롭 예제의 향상된 버전으로, 드래그할 때 정렬이 추가됩니다.

HTML 코드입니다

코드 복사 코드는 다음과 같습니다.

제품

티셔츠

>                                

롤캣 셔츠

>                                                                         

버킷 셔츠

>

가방

>                    

얼룩말 줄무늬

>              >                                >

가젯

> > > >                        >

장바구니

>                                            

여기에 항목을 추가하세요

        

js 코드에서 빨간색 코드 부분은 드래그할 수 있을 때 정렬되도록 설정되어 있습니다. 주황색 ​​코드 부분은 이해하기 어렵고 쓸모없어 보입니다.





코드 복사


코드는 다음과 같습니다.

$(함수 () {
    $("#catalog").accordion();
    $("#catalog li").draggable({
        추가: "본문",
        도우미: "복제",
        connectToSortable: "#cart ol"
    });
    $("#cart ol").sortable({
        항목: "li:not(.placeholder)",
        connectWith: "li",
        정렬: 함수 () {
            $(this).removeClass("ui-state-default");
        },
        오버: 함수 () {
            //항목이 정렬 가능한 항목 위에 있으면 자리 표시자를 숨깁니다
            $(".placeholder").hide();
        },
        출력: 함수 () {
            if ($(this).children(":not(.placeholder)").length == 0) {
                //목록에 항목이 없으면 자리 표시자를 다시 표시합니다
                $(".placeholder").show();
            }
        }
    });
});

　　另외부值得一提的是

.ui-state-default가 있습니다
ui-state-hover는 ui-state-hover를 통해 사용자에게 유용한 정보를 제공합니다.

以上就是关于jQueryUI中拖拽排序问题的分析了，希望大家能够喜欢。