>  기사  >  웹 프론트엔드  >  js는 Pictures_javascript 기술의 순서를 변경하기 위해 사진 드래그를 구현합니다.

js는 Pictures_javascript 기술의 순서를 변경하기 위해 사진 드래그를 구현합니다.

WBOY
WBOY원래의
2016-05-16 16:48:291560검색

웹페이지에서 여러 요소의 위치를 ​​변경해야 하는 경우 요소를 드래그하여 변경할 수 있습니다. HTML5에는 true/false를 설정하여 요소를 드래그할 수 있는지 여부를 제어하는 ​​전역 속성 draggable이 추가되었습니다.

다음은 jQuery로 구현한 이미지 드래그의 예입니다. 페이지에 여러 이미지가 있고, 하나의 이미지를 다른 두 이미지의 가운데로 드래그하고, 이미지의 위치를 ​​두 이미지 사이에 삽입할 수 있습니다. 두 이미지 사이.

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



.img-div img {
높이:200px; >}
.img-div {
float: 왼쪽;
}
.drop-left,.drop-right {
너비: 50px
높이: 200px; >float: 왼쪽;