jquery UI 에서 드래그 정렬 예시 분석
사실은 jquery UI 공식 카 트 드래그 에 예 를 추가 한 증강 판 으로 드래그 할 때 정렬 을 추가 한 것 입 니 다.
html 코드 입 니 다.
Products
T-Shirts
- Lolcat Shirt
- Cheezeburger Shirt
- Buckit Shirt
Bags
- Zebra Striped
- Black Leather
- Alligator Leather
Gadgets
- iPhone
- iPod
- iPad
Shopping Cart
이것 은 js 코드 입 니 다. 주로 js 코드 에서 빨간색 코드 부분 에 드래그 해서 들 어 갈 때 정렬 할 수 있 도록 설정 되 어 있 습 니 다. 주황색 코드 부분 은 이해 가 안 되 고 쓸모 가 없 는 것 같 습 니 다.
$(function () {
$("#catalog").accordion();
$("#catalog li").draggable({
appendTo: "body",
helper: "clone",
connectToSortable: "#cart ol"
});
$("#cart ol").sortable({
items: "li:not(.placeholder)",
connectWith: "li",
sort: function () {
$(this).removeClass("ui-state-default");
},
over: function () {
//hides the placeholder when the item is over the sortable
$(".placeholder").hide();
},
out: function () {
if ($(this).children(":not(.placeholder)").length == 0) {
//shows the placeholder again if there are no items in the list
$(".placeholder").show();
}
}
});
});
그리고 언급 할 만 한 것 은
. ui - state - default 는 끌 어 당 길 때 내 장 된 클래스 인 것 같 습 니 다. 이에 대응 하 는 것 은 ui - state - hover 등 이 끌 어 당 길 수 있 는 대상 이 끌 어 당 길 때 와 용기 에 끌 어 당 길 때의 효과 도 있 습 니 다. 본 고 는 코드 가 나타 나 지 않 았 습 니 다.
다음은 jQuery UI 에서 드래그 정렬 문제 에 대한 분석 입 니 다. 마음 에 드 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
