jQuery 드래그 앤 드롭 레이어 소개 및 example_javascript 기술

iDrag & iDialog 소개
기능:
iDialog.js는 jquery로 작성된 간단하고 사용하기 쉬운 대화 상자를 사용합니다. 동시에 다음을 통해 대화 상자의 표시 애니메이션을 변경할 수도 있습니다. CSS3을 추가합니다. 두 가지 방법이 제공됩니다:

•1. 드래그 기능 iDrag() 또는 $.drag();
•2. 대화 상자 기능 iDialog() 또는 $.dialog()
크로스 플랫폼 호환성:
IE6, Firefox, Chrome 및 기타 주요 브라우저(다른 브라우저는 테스트를 위해 일시적으로 사용할 수 없음) 또한 IE6은 최신 브라우저의 정적 위치 지정(고정) 및 오버레이 드롭다운 컨트롤도 지원할 수 있습니다.

점진적으로 향상된 경험:
IE 제품군이 완전한 기능을 갖출 수 있다는 전제하에 최신 브라우저는 그림자, 둥근 모서리, 스케일 쇼, 슈퍼 스케일 쇼, 오른쪽 슬라이드 쇼 애니메이션과 같은 CSS3 향상된 경험을 적절하게 추가합니다. , animation CSS 파일을 직접 수정하여 확장할 수도 있습니다.

풍부한 인터페이스:
1. $.drag() 함수는 드래그 범위 설정, 드래그 전 콜백 기능, 드래그 프로세스 및 드래그 종료를 제공합니다. $.dialog() 함수는 CSS3 표시 효과, 크기, 위치, 표시, 닫기 및 외부 액세스 인터페이스 등을 제공합니다. 자세한 내용은 아래 API를 참조하세요.

빠른 시작:


•jquery.iDialog.js는 jquery를 사용하여 구현되므로 로드하기 전에 jQuery를 로드해야 합니다.
•dialog- theme= "default"는 default.css 스타일 시트가 자동으로 로드된다는 의미입니다.
•default.css는 테마 폴더에 저장되어야 하며 폴더와 jquery.iDialog.js는 동일한 디렉터리에 있어야 합니다.
iDrag()의 전체 사용 예:
JS 코드:

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

var log = $('#drag- 데모 로그 ');

iDrag({

대상:'#드래그-데모',

최소:{x:0, y:0},

최대:{x:658, y:170},

시작: 함수(pos) {

log.html('start:x=' pos.x ', y=' pos.y);

},

이동: 함수(pos){

log.html('move:left=' pos.x ', top=' pos.y);

},

끝: 함수(pos){

log.html('end:left=' pos.x ', top=' pos.y);

}

});

iDialog() 사용 예:

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

iDialog( {

제목:'Hello World',

id:'DemoDialog',

내용:'

안녕하세요 여러분:
저는 minDialog입니다

',

잠금: 사실,

너비:500,

수정됨: true,

높이:300

});