웹 페이지에서는 요소를 드래그하여 달성 할 수있는 여러 요소의 위치를 변경해야합니다. 글로벌 속성 Draggable이 HTML5에 추가되며, 이는 True/False를 설정하여 요소를 드래그 할 수 있는지 제어합니다.
사진 드래그를 예제로 찍고 jQuery를 사용하여 구현합시다. 페이지에 여러 장의 사진이 있고, 한 그림을 다른 두 그림의 중간으로 드래그 한 다음이 그림의 위치를 두 그림 사이에 삽입 할 수 있습니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<스타일>
.img-div img {
너비 : 200px;
높이 : 200px;
플로트 : 왼쪽;
}
.img-div {
플로트 : 왼쪽;
}
.Drop-left, .drop-right {
너비 : 50px;
높이 : 200px;
플로트 : 왼쪽;
}
</스타일>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"> </script>
<cript>
$ (document) .ready (function () {
// 드래그 된 이미지의 부모 div
var $ srcimgdiv = null;
// 드래그를 시작합니다
$ ( ". img-div img"). bind ( "dragstart", function () {
$ srcimgdiv = $ (this) .parent ();
});
// 위로 드래그 할 때 이벤트가 발생했습니다
$ ( ". drop-left, .drop-right"). bind ( "dragover", function (event) {
// 이벤트를 통해 드래그 앤 드롭을 설정해야합니다 .preventDefault ()
event.preventDefault ();
});
// 마우스를 드래그하고 공개하는 이벤트 종료
$ ( ". drop-left"). bind ( "drop", function (event) {
event.preventDefault ();
if ($ srcimgdiv [0]! = $ (this) .parent () [0]) {
$ (this) .parent (). 이전 ($ srcimgdiv);
}
});
$ ( ". Drop-Right"). bind ( "drop", function (event) {
event.preventDefault ();
if ($ srcimgdiv [0]! = $ (this) .parent () [0]) {
$ (this) .parent (). 이후 ($ srcimgdiv);
}
});
});
</스크립트>
</head>
<body>
<div>
<div> </div>
<img src = "http://photos.tuchong.com/38538/f/6864556.jpg"draggable = "true">
<div> </div>
</div>
<div>
<div> </div>
<img src = "http://photos.tuchong.com/349669/f/6695960.jpg"draggable = "true">
<div> </div>
</div>
<div>
<div> </div>
<img src = "http://photos.tuchong.com/349669/f/6683901.jpg"draggable = "true">
<div> </div>
</div>
<div>
<div> </div>
<img src = "http://photos.tuchong.com/349669/f/5121337.jpg"draggable = "true">
<div> </div>
</div>
</body>
</html>
DragStart는 요소를 드래그하기 시작하는 이벤트입니다. Dragover는 요소 위로 끌리는 이벤트이며, Drop은 마우스를 드래그하고 방출하는 이벤트입니다.
draggable = "true"는 IMG 요소를 드래그 할 수 있음을 의미하지만 실제로 IMG는 기본적으로 드래그 가능 하므로이 속성을 제거 할 수도 있습니다. div 요소를 드래그하려면 draggable = "true"를 설정해야합니다.
클래스 드롭 왼쪽 및 드롭 오른쪽이있는 div 요소는 그림의 왼쪽과 오른쪽에 배치되며 다른 그림을 받고이 위치로 끌어들이는 데 사용됩니다.