ในหน้าเว็บคุณต้องเปลี่ยนตำแหน่งของหลายองค์ประกอบซึ่งสามารถทำได้โดยการลากองค์ประกอบ แอตทริบิวต์ทั่วโลกจะถูกเพิ่มลงใน HTML5 ซึ่งควบคุมว่าองค์ประกอบสามารถลากได้หรือไม่โดยการตั้งค่าจริง/เท็จ
ลองถ่ายภาพเป็นตัวอย่างและใช้ jQuery เพื่อนำไปใช้: มีรูปภาพหลายภาพบนหน้าลากหนึ่งภาพไปที่กลางสองภาพอื่น ๆ จากนั้นตำแหน่งของภาพนี้สามารถแทรกระหว่างภาพทั้งสอง
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<style>
.img-div img {
ความกว้าง: 200px;
ความสูง: 200px;
ลอย: ซ้าย;
-
.img-div {
ลอย: ซ้าย;
-
.Drop-Left,. drop-right {
ความกว้าง: 50px;
ความสูง: 200px;
ลอย: ซ้าย;
-
</style>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"> </script>
<script>
$ (เอกสาร) .ready (function () {
// parent div ของภาพที่ถูกลาก
var $ srcimgdiv = null;
// เริ่มลาก
$ (". img-div img"). bind ("dragstart", function () {
$ srcimgdiv = $ (นี่) .parent ();
-
// เหตุการณ์ยิงเมื่อลากเหนือ. drop-left,. drop-right
$ (". ดรอป-ซ้าย, .drop-right"). ผูก ("dragover", ฟังก์ชั่น (เหตุการณ์) {
// อนุญาตให้ลากและวางจะต้องตั้งค่าผ่าน event.preventdefault ()
Event.preventDefault ();
-
// สิ้นสุดเหตุการณ์การลากและปล่อยเมาส์
$ (". drop-left"). bind ("drop", ฟังก์ชั่น (เหตุการณ์) {
Event.preventDefault ();
if ($ srcimgdiv [0]! = $ (นี่) .parent () [0]) {
$ (นี่) .parent (). ก่อน ($ srcimgdiv);
-
-
$ (". drop-right"). bind ("drop", ฟังก์ชั่น (เหตุการณ์) {
Event.preventDefault ();
if ($ srcimgdiv [0]! = $ (นี่) .parent () [0]) {
$ (นี่) .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 เป็นเหตุการณ์ที่ลากเหนือองค์ประกอบและ Drop คือเหตุการณ์ที่สิ้นสุดการลากและปล่อยเมาส์
draggable = "true" หมายความว่าองค์ประกอบ IMG สามารถลากได้ แต่อันที่จริงแล้ว IMG นั้นสามารถแยกออกได้โดยค่าเริ่มต้นดังนั้นคุณสมบัตินี้สามารถลบออกได้ หากคุณต้องการลากองค์ประกอบ div คุณต้องตั้งค่า draggable = "true"
องค์ประกอบ DIV ที่มีชั้นเรียนดร็อปซ้ายและการดร็อปขวาถูกวางไว้ที่ด้านซ้ายและขวาของภาพและใช้เพื่อรับรูปภาพอื่น ๆ และลากไปยังตำแหน่งนี้