How to disable drag and drop(when file dragged to browser)

Vault
#1

I want to use two vault components on one page.

But, it is not working properly.

You can check that by below sample code.

https://docs.dhtmlx.com/vault/samples/03_usage/01_custom_drop_area.html

Change like this:

    <body>
        <div class="top-rect-block">
            <div class="text-value">You can drop files both to Vault and to another drop area</div>
        </div>
        <div class="wrapper with-header">
            <div id="vault" class="vault-block"></div>
            <div id="drophere" class="droparea">
                <div class="droparea-text">Drop here</div>
            </div>
        </div>
        <div class="wrapper with-header">
            <div id="vault2" class="vault-block"></div>
            <div id="drophere2" class="droparea">
                <div class="droparea-text">Drop here</div>
            </div>
        </div>
        <script>
            var vault = new dhx.Vault("vault", {
                uploader: {
                    target: "/backend/upload"
                }
            });
            vault.uploader.linkDropArea("drophere");

            var vault2 = new dhx.Vault("vault2", {
                uploader: {
                    target: "/backend/upload"
                }
            });
            vault2.uploader.linkDropArea("drophere2");
        </script>
    </body>

Then, only one component(the last one) is working properly.

A file dragged to the first component then the event happened to the 2nd component.

So, I changed my plan to not support drag and drop functionality by setting disable drag and drop entirely.

But, it was not easy too. I can not find any configuration property like “Vault.disableDragAndDrop: true” on API documents.

Please, help me.

#2

Could you please, clarify your using scenario with the snippet, as it works well for me locally:
https://snippet.dhtmlx.com/hgb3gf9a

#3

First of all, I appreciated your reply.

You are right. It works perfectly.

And I found that it is not working on version 3. It is working on version 4 only.
(You can check “Sematik”'s link. Try switch versions and see.)

I used version 3. So, I have met abnormal activity.

With an upgrade from version 3 to version 4, the problem was cleared.

P.S: I set like below to disable Drag & Drop globally.

dhx.Vault.prototype._getDragEvents = function(){
    return null;
};
1 Like