Webページでは、複数の要素の位置を変更する必要があります。これは、要素をドラッグすることで実現できます。 Global Attribute DraggableがHTML5に追加されます。HTML5は、true/falseを設定することで要素をドラッグできるかどうかを制御します。
写真を撮影してjqueryを使用してそれを実装しましょう。ページに複数の写真があり、1つの写真を他の2つの写真の中央にドラッグしてから、この写真の位置を2つの写真の間に挿入できます。
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<style>
.img-div img {
幅：200px;
高さ：200px;
フロート：左;
}
.img-div {
フロート：左;
}
.drop-left、.drop-right {
幅：50px;
高さ：200px;
フロート：左;
}
</style>
<スクリプトsrc = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"> </script>
<スクリプト>
$（document）.ready（function（）{
//ドラッグされた画像の親div
var $ srcimgdiv = null;
//ドラッグを開始します
$（ "。img-div img"）。bind（ "dragstart"、function（）{
$ srcimgdiv = $（this）.parent（）;
}）;
//左上をドラッグするときに発生したイベント、.drop-right
$（ "。ドロップ左、.drop-right"）。
// 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）;
}
}）;
}）;
</script>
</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は要素の上にドラッグするイベントであり、ドロップはマウスをドラッグして放出するイベントです。
draggable = "true"とは、IMG要素をドラッグできることを意味しますが、実際、IMGはデフォルトでドラッグ可能であるため、このプロパティも削除できます。 div要素をドラッグする場合は、draggable = "true"を設定する必要があります。
クラスドロップ左とドロップライトを備えたDIV要素は、写真の左右に配置され、他の写真を受け取り、この位置にドラッグするために使用されます。