지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > js는 Pictures_javascript 기술의 순서를 변경하기 위해 사진 드래그를 구현합니다.

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

WBOY
풀어 주다： 2016-05-16 16:48:29
원래의
1590명이 탐색했습니다.

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

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

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



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

저자별 최신 기사
최신 이슈
모바일 보기에서 사용자가 링크를 클릭할 때 이 탐색 표시줄을 어떻게 닫을 수 있나요? 사용자가 웹 사이트를 탐색하기 위해 링크를 클릭하면 탐색 표시줄이 닫히지 않습니까? 내비게이션 바를 닫기 위해 각 링크에 클릭 이벤트 리스너를 추가해 보았지만 작...
에서 2024-04-06 19:23:03
0
1
411
JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}
에서 2024-04-06 19:25:49
0
1
505
Android의 React-Native에서 상태 업데이트가 작동하지 않습니다. 스와이프할 수 있는 가로 갤러리에 이미지 쌍이 있는 코드가 있습니다. 이제 두 이미지의 위쪽 부분을 클릭하면 이미지가 꺼지므로 isImage2Active를 상태로...
에서 2024-04-06 16:54:10
0
1
410
숨겨진 측면 패널 표시: 선택됨 애니메이션 햄버거 메뉴를 통해 보기로 전환할 수 있는 탐색 메뉴를 측면 패널에 갖고 싶습니다. JS 없이 CSS만 사용하여 만들고 싶습니다. :checked 의사...
에서 2024-04-06 15:49:33
0
1
319
내 이미지를 페이지의 기본 디스플레이에 표시하려면 어떻게 해야 합니까? 제가 하고 싶은 것은 NASAAPI를 사용하여 사진 몇 장을 받는 것입니다. 이 사진은 내 페이지의 썸네일과 메인 디스플레이에 표시됩니다. 코드가 썸네일에서 이미...
에서 2024-04-06 15:33:12
0
1
433
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿