في صفحة الويب ، تحتاج إلى تغيير موضع عناصر متعددة ، والتي يمكن تحقيقها عن طريق سحب العنصر. تتم إضافة السمة العالمية القابلة للسحب إلى HTML5 ، والتي تتحكم في ما إذا كان يمكن سحب العنصر عن طريق تعيين True/False.
دعنا نأخذ صورة السحب كمثال ونستخدم jQuery لتنفيذها: هناك صور متعددة على الصفحة ، وسحب صورة واحدة إلى منتصف الصورتين الأخريين ، ثم يمكن إدراج موضع هذه الصورة بين الصورتين.
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<style>
.img-div img {
العرض: 200 بكسل ؛
الارتفاع: 200 بكسل ؛
تعويم: اليسار.
}
.img-div {
تعويم: اليسار.
}
.drop-left ، .drop-right {
العرض: 50 بكسل ؛
الارتفاع: 200 بكسل ؛
تعويم: اليسار.
}
</style>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"> </script>
<script>
$ (وثيقة). ready (function () {
// الوالد Div للصورة المجردة
var $ srcimgdiv = null ؛
// ابدأ السحب
$ (". img-div img"). bind ("dragstart" ، function () {
$ srcimgdiv = $ (this) .parent () ؛
}) ؛
// الأحداث التي تم إطلاقها عند السحب فوق .drop-left ، .drop-right
$ (". Drop-Left ، .drop-right"). BIND ("Dragover" ، Function (event) {
// السماح بالسحب والإفلات يجب تعيين من خلال Event.PreventDefault ()
Event.PreventDefault () ؛
}) ؛
// إنهاء حدث سحب الماوس وإطلاقه
$ (". Drop-Left"). Bind ("Drop" ، Function (event) {
Event.PreventDefault () ؛
if ($ srcimgdiv [0]! = $ (this) .parent () [0]) {
$ (هذا) .parent (). قبل ($ srcimgdiv) ؛
}
}) ؛
$ (". Drop-Right"). bind ("Drop" ، function (event) {
Event.PreventDefault () ؛
if ($ srcimgdiv [0]! = $ (this) .parent () [0]) {
$ (هذا) .parent (). بعد ($ srcimgdiv) ؛
}
}) ؛
}) ؛
</script>
</head>
<body>
<viv>
<viv> </viv>
<img src = "http://photos.tuchong.com/38538/f/6864556.jpg" draggable = "true">
<viv> </viv>
</div>
<viv>
<viv> </viv>
<img src = "http://photos.tuchong.com/349669/f/6695960.jpg" draggable = "true">
<viv> </viv>
</div>
<viv>
<viv> </viv>
<img src = "http://photos.tuchong.com/349669/f/6683901.jpg" draggable = "true">
<viv> </viv>
</div>
<viv>
<viv> </viv>
<img src = "http://photos.tuchong.com/349669/f/5121337.jpg" draggable = "true">
<viv> </viv>
</div>
</body>
</html>
DragStart هو الحدث الذي يبدأ في سحب العنصر ، و Dragover هو الحدث الذي يتجول فوق العنصر ، و Drop هو الحدث الذي ينتهي السحب وإطلاق الماوس.
يعني Draggable = "True" أنه يمكن سحب عنصر IMG ، ولكن في الواقع ، يمكن سحب IMG بشكل افتراضي ، بحيث يمكن أيضًا إزالة هذه الخاصية. إذا كنت ترغب في سحب عنصر DIV ، فأنت بحاجة إلى تعيين Draggable = "True".
يتم وضع عناصر Div مع انخفاض الفئة واليمين المتساقط على الجانبين الأيسر والأيمن من الصورة ، وتستخدم لتلقي صور أخرى والسحب إلى هذا الموقف.