• 0

كيف أستعمل تقنية Drag Drop لتحميل ملف من خلال Input file؟

ألاحظ كثيرا هذه التقنية، وهي استخدام طريقة السحب drag & drop مع input file لتحميل الملفات على مواقع كثيرة، فما هي الطريقة المتبعة لبرمجة ذلك؟ أود إدراجها في موقعي؟

تمّ تعديل بواسطة Badraoui

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 1

أشرح لك الطريقة عبر كود Drag and drop باستعمال JavaScript ، حيث تدعمه المتصفحات: chrome،FireFox وsafari

  • باعتبار كود html:
<div id="drop-zone">
    Drop files here...
    <div id="clickHere">
        or click here..
        <input type="file" name="file" id="file" />
    </div>
</div>
  • كود Javascript:
$(function () {
    var dropZoneId = "drop-zone";
    var buttonId = "clickHere";
    var mouseOverClass = "mouse-over";

    var dropZone = $("#" + dropZoneId);
    var ooleft = dropZone.offset().left;
    var ooright = dropZone.outerWidth() + ooleft;
    var ootop = dropZone.offset().top;
    var oobottom = dropZone.outerHeight() + ootop;
    var inputFile = dropZone.find("input");
    document.getElementById(dropZoneId).addEventListener("dragover", function (e) {
        e.preventDefault();
        e.stopPropagation();
        dropZone.addClass(mouseOverClass);
        var x = e.pageX;
        var y = e.pageY;

        if (!(x < ooleft || x > ooright || y < ootop || y > oobottom)) {
            inputFile.offset({ top: y - 15, left: x - 100 });
        } else {
            inputFile.offset({ top: -400, left: -400 });
        }

    }, true);

    if (buttonId != "") {
        var clickZone = $("#" + buttonId);

        var oleft = clickZone.offset().left;
        var oright = clickZone.outerWidth() + oleft;
        var otop = clickZone.offset().top;
        var obottom = clickZone.outerHeight() + otop;

        $("#" + buttonId).mousemove(function (e) {
            var x = e.pageX;
            var y = e.pageY;
            if (!(x < oleft || x > oright || y < otop || y > obottom)) {
                inputFile.offset({ top: y - 15, left: x - 160 });
            } else {
                inputFile.offset({ top: -400, left: -400 });
            }
        });
    }

    document.getElementById(dropZoneId).addEventListener("drop", function (e) {
        $("#" + dropZoneId).removeClass(mouseOverClass);
    }, true);

})
  • كود css:
#drop-zone {
    /*Sort of important*/
    width: 300px;
    /*Sort of important*/
    height: 200px;
    position:absolute;
    left:50%;
    top:100px;
    margin-left:-150px;

وباختصار يتم التعرّف على الملف عبر سحبه إلى الجزء الخاص بالتحميل، ومن ثم رفعه بعد الضغط على زر الرفع أو جعل الرفع يتم تلقائيا.

بعد إدراج الكود السبق سيظهر لك حقل input file بالشكل:

Capture_Drag_drop.thumb.PNG.7b0e082fdfd7

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن