jQuery 목록 끌기 array_jquery의 특정 구현

 

实现这个很简单

第一，导入JS，jquery.dragsort.js，jquery.dragsort-0.4.min.js，jquery-1.4.2.min.js 。

第二，代码

复主代码 代码如下:

< ;h2>两组列表拖放:

• 10


• 11


• 12


• 13


• 14


• 15


• 16


• 17


• 18

• 1


• 2


• 3


• 4


• 5


• 6


• 7


• 8


• 9

三，样式

复主代码 代码如下:

<스타일 유형="텍스트/css">
*{margin:0;padding:0;list-style-type:none;}
body{font-family:Arial;font-size:12pt;color:#333;}
h1{ 글꼴 크기:16pt;}
h2{글꼴 크기:13pt;}
/* 데모 */
.demo{padding:20px;width:800px;margin:20px auto;border:solid 1px 검정;}
.demo h2{margin:30px 0 20px 0;color:#3366cc;}
/* 드래그 기능 */
.dragfunction{margin:40px 0 0 0;}
.dragfunction dt{height:30px;font-weight:800;}
.dragfunction dd{line-height:22px;padding:0 0 20px 0;color:#5e5e5e;}
/* dragsort */
.dragsort-ver li{height:30px;line-height:30px;}
.dragsort{width:350px;list-style-type:none;margin:0px;}
.dragsort li{float:left ;padding:5px;width:100px;height:100px;}
.dragsort div{width:90px;height:50px;border:solid 1px black; background-color:#E0E0E0;text-align:center;padding- top:40px;}
.placeHolder div{배경-색상:white!important;border:dashed 1px grey!important;}

넷째, 설명

dragSelector

CSS 선택기 내 요소 목록 항목의 드래그 핸들입니다. 기본값은 "li"입니다.

dragSelectorExclude
CSS 선택기 요소 내의 dragSelector는 dragsort를 실행하지 않습니다. 기본값은 "input, textarea, a[href]"입니다.
dragEnd
드래그가 완료된 후 호출되는 콜백 함수
dragBetween
선택한 목록에 대해 여러 목록 세트 간에 드래그를 활성화하려면 "true"로 설정하세요. 기본값은 false입니다.
placeHolderTemplate
목록의 HTML 부분을 드래그합니다. 기본값은 "

"입니다.
scrollContainer
자동으로 설정된 오버플로 div와 같은 스크롤 컨테이너 역할을 하는 CSS 선택기 요소입니다. 기본값은 "window"입니다.
scrollSpeed ​​​​
페이지에서 항목을 드래그하면 컨테이너 외부로 스크롤되는 속도가 빨라집니다. 값이 낮을수록 속도가 느려집니다. 스크롤을 비활성화하려면 "0"으로 설정합니다. 기본값은 "5"입니다.