In my website I have to implement a drag and drop functionality, which works fine in google chrome and firefox, but it doesn't work well in IE. The drop target is a form.

The problem, to be more precise, is that dragging over the form is not allowed, although I wrote the javascript code to prevent the default behaviour.

document.getElementById("newOfferForm").addEventListener("dragover",
            function (e) {
                e.preventDefault();
            });

document.getElementById("newOfferForm").addEventListener("drop", onDropObject);

I am able to drag elements over the children of the form (inputs), and if I drop the element over them it works fine, but dragging an element over the form in itself is not allowed.

I checked in the debugger and IE, and I see that the javascript code above is reached and so executed. No error occurs when the event listener is added to the form, neither when I try to drag and drop an element.

Here below you can read the Razor/HTML code of the form.

@using ERP.PresentationLayer.ViewModels.CRM

<form id="newOfferForm" action="javascript:saveOffer()">
    <input name="DocumentType" hidden readonly value="@((int)ViewData["documentType"])" />

    @if (((int)ViewData["documentType"]) == 1 || ((int)ViewData["documentType"]) == 2)
    {
        if (((int)ViewData["documentType"]) == 1)
        {
        <h3>Bollettino</h3>
        }

        else
        {
        <h3>Fattura</h3>
        }

        <div>
            <input id="associatedOfferNumber" name="AssociatedOfferNumber" hidden readonly />
            <label id="associatedOfferNumberLabel" hidden>&lt;---&gt;</label>
            <span id="associatedOfferNumberSpan"></span>
        </div>
    }

    else
    {
        <h3>Offerta</h3>
    }

    @*<div id="errors"></div>*@
    <textarea id="newOfferAddress" name="Address" rows="3" style="width:25%;"></textarea>
    <input name="OfferNumber" readonly id="offerNumberInput" class="formElement"  placeholder="Offer number" value="@(ViewData["offerNumber"] as string)" />
    <input name="OfferTitle" id="offerTitleInput" class="formElement" placeholder="Offer title"/>

    <input id="newOfferSalutationText" name="SalutationText" />
    <input type="number" name="WrappedContactId" id="newOfferChoosePersonHidden" hidden readonly />
    <input type="number" name="ContactType" id="newOfferContactType" hidden readonly />
    <input id="newOfferChoosePerson" readonly placeholder="Scegli destinatario" />


        <select id="newOfferPersonTitleSelect" hidden>
            <option disabled selected>Choose title</option>

            @foreach(string personTitle in (IEnumerable<string>)ViewData["personTitles"])
            {
            <option value="@personTitle">@personTitle</option>
            }
        </select>



        <select id="newOfferCompanyTitleSelect" hidden>
            <option disabled selected>Choose title</option>

            @foreach (string companySalutation in (IEnumerable<string>)ViewData["companySalutations"])
            {
                <option value="@companySalutation">@companySalutation</option>
            }
        </select>




    <textarea name="OfferText" id="offerText" class="formElement" cols="62" rows="5" ></textarea>

    @*@(Html.Kendo().MultiSelect()
        .Name("productsMultiselect")
        .Placeholder("Select products or services")
        .DataSource(source => source.Read(read => read.Action("GetAllProducts", "Offers")))
        .DataTextField("ProductName")
        .DataValueField("ProductId")
        .Events(e => e.Change("onChangeProductOffers"))
        )*@

    @*<div id="newOfferSelectProductsAction" class="action">Select products</div>*@
    <div id="newOfferCreateCustomProductAction" class="action">Create custom product</div>

    @*<div id="newOfferProductOffers" data-index="0" class="root" data-selected="true">
        <img src="~/img/AddChildIcon.png" class="addParagraphButton" /><img src="~/img/Pointer.png" class="selectParagraphButton" />
        <input hidden name="Paragraphs[0].Index" value="0" />
        <input hidden name="Paragraphs[0].ParagraphName" value="Root" />
    </div>*@

    <table id="newOfferProductOffersTable">
        <tr id="newOfferProductOffersTableHeaderRow">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>Articolo</td>
            <td>Prz/unità</td>
            <td>Qta</td>
            <td>Unità</td>
            <td>Sconto</td>
            <td>Importo</td>
            <td></td>
        </tr>

        <tr class="paragraphNameRow" data-index="0">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td data-index="0">
                <input name="Paragraphs.Index" value="0" hidden>
                <input name="Paragraphs[0].Index" value="0" hidden>
                <input name="Paragraphs[0].ParagraphName" value="Root" hidden>
                <img src="~/img/AddChildIcon.png" class="addParagraphButton" /><img src="~/img/Pointer.png" class="selectParagraphButton" />
            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        @*<tr class="newOfferProductOffersTableSubTotalRow" data-index="0">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>Subtotale Root</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>*@
    </table>

    <table class="productOffersTotal">
        <tr>
            <td>

            </td>

            <td>

            </td>

            <td class="newOfferTotalHeader">
                Subtotale
            </td>

            <td id="subTotal">

            </td>
        </tr>

        <tr>
            <td></td>

            <td></td>

            <td class="newOfferTotalHeader">
                IVA
            </td>

            <td id="newOfferIvaId">

            </td>
        </tr>

        <tr>
            <td></td>

            <td></td>
            <td class="newOfferTotalHeader">
                Totale
            </td>

            <td id="newOfferTotal">

            </td>
        </tr>
    </table>
    <button type="button" id="newOfferCloseButton">Chiudi offerta</button>
    <button type="button" id="newOfferCancelButton">Cancella tutto il contenuto</button>
    <button type="button" id="newOfferCancelAndCloseButton">Cancella e chiudi</button>
    <button type="submit">Salva e chiudi</button>
</form>

Related posts

Recent Viewed