Auf der Webseite müssen Sie die Position mehrerer Elemente ändern, die durch Ziehen des Elements erreicht werden können. Ein globales Attribut -Draggable wird zu HTML5 hinzugefügt, das steuert, ob das Element durch Einstellen von True/False gezogen werden kann.
Nehmen wir als Beispiel einen Bild ziehen und verwenden Sie JQuery, um es zu implementieren: Es gibt mehrere Bilder auf der Seite, ziehen Sie ein Bild in die Mitte der beiden anderen Bilder, und dann kann die Position dieses Bildes zwischen den beiden Bildern eingefügt werden.
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<Styles>
.img-div img {
Breite: 200px;
Höhe: 200px;
float: links;
}
.img-div {
float: links;
}
.drop-links, .drop-rechte {
Breite: 50px;
Höhe: 200px;
float: links;
}
</style>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"> </script>
<Script>
$ (Dokument) .Ready (function () {
// übergeordnete Div des gezogenen Bildes
var $ srcimgdiv = null;
// Ziehen
$ (". Img-div img"). Bind ("Dragstart", function () {
$ srcimgdiv = $ (this) .Parent ();
});
// Ereignisse abgefeuert, wenn sie über .drop-links,.
$ (". Drop-links, .drop-right"). Bind ("Dragover", Funktion (Ereignis) {
// Drag & Drop muss über Event.PreventDefault () eingestellt werden.
Event.PreventDefault ();
});
// beenden Sie das Ereignis des Ziehens und Verlassens der Maus
$ (". Drop-links"). Bind ("Drop", Funktion (Ereignis) {
Event.PreventDefault ();
if ($ srcimgdiv [0]! = $ (this) .Parent () [0]) {
$ (this) .Parent (). Bevor ($ srcimgdiv);
}
});
$ (". Drop-right"). Bind ("Drop", Funktion (Ereignis) {
Event.PreventDefault ();
if ($ srcimgdiv [0]! = $ (this) .Parent () [0]) {
$ (this) .Parent (). Nach ($ 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 ist das Ereignis, das das Element zum Ziehen des Elements beginnt, Dragover ist das Ereignis, das über das Element zieht, und Drop ist das Ereignis, das die Maus schleppt und freigibt.
draggable = "true" bedeutet, dass das IMG -Element gezogen werden kann, aber tatsächlich ist IMG standardmäßig draggbar, sodass diese Eigenschaft auch entfernt werden kann. Wenn Sie das DIV -Element ziehen möchten, müssen Sie Draggable = "True" festlegen.
Die DIV-Elemente mit Klassen Drop-Links und Drop-Light sind auf der linken und rechten Seite des Bildes platziert und werden verwendet, um andere Bilder zu empfangen und diese Position zu ziehen.