Is it possible to remove the default drop zone?

[Phil Mattson]

I have tried numerous approaches to prevent the default drop zone that is added by the AsynUpload to the page from showing or firing its drag events but have come up empty handed.  As you can see by looking at my source code:

<div class="ssbUploaderDropZone">
    <asp:Label runat="server" ID="lblTop" CssClass="ssbLabel ssbTopLabel"></asp:Label>
    <telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload" CssClass="ssbImageUploader" DropZones=".ssbUploaderDropZone">
    </telerik:RadAsyncUpload>
    <asp:Label runat="server" ID="lblBottom" CssClass="ssbLabel ssbBottomLabel"></asp:Label>
</div>
<asp:HiddenField runat="server" ID="hdnOrganizationNameFolder" />
<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel" RenderMode="Inline" style="display:none;">
    <%--Provide support for this element when it is updated by RadAjaxManager or RadAjaxPanel--%>
    <telerik:RadScriptBlock runat="server">
        <script>
            AsyncUploader.initialize('<%=this.ClientID%>');
        </script>
    </telerik:RadScriptBlock>
</telerik:RadAjaxPanel>
<telerik:RadCodeBlock runat="server" ID="RadCodeBlock">
    <script>
        $(document).ready(function () {
            AsyncUploader.initialize('<%=this.ClientID%>');
        });
    </script>
</telerik:RadCodeBlock>

/// <summary>
/// Wraps the usercontrol in a container div that is the ID of the usercontrol.
/// </summary>
/// <param name="writer"></param>
protected override void Render(HtmlTextWriter writer)
{
    //Add a containing div element
    writer.Write("<div id=\"" + this.ClientID + "\" class=\"ssbUploaderContainer\">");
    base.Render(writer);
    writer.Write("</div>");
}

.ruDropZone {
    display: none !important;
}

// -------------------------------------------------- //AsyncUploader
// Async Uploader
// -------------------------------------------------- //

function AsyncUploader() {
        // Avoid using the window scope:
        // return a new util object if we're in the wrong scope
        if (window === this) {
            return new AsyncUploader();
        }

        // Return the object
        return this;
};

// Prototype Functions
AsyncUploader.prototype = {
    initialize: function (controlID) {
        /// <summary>Initialize the AsyncUploader control</summary>
        /// <param name="controlID" type="String">The ID of the AsyncUpload control to initialize</param>
        control = $("[id$='" + controlID + "']");
        if (control[0]) {
            var dropZone = $(control).find(".ssbUploaderDropZone");
            dropZone.bind({ "dragenter": function (e) { AsyncUploader.dragEnter(e, dropZone); } });
            dropZone.bind({ "dragleave": function (e) { AsyncUploader.dragLeave(e, dropZone); } });
            dropZone.bind({ "drop": function (e) { AsyncUploader.drop(e, dropZone); } });
        }
    },
    dragEnter: function (e, dropZone) {
        /// <summary>Handles the DragEnter event</summary>
        /// <param name="e" type="Event">The event that has occurred</param>
        /// <param name="dropZone" type="DOM Element">The dropZone DOM element</param>
        $(dropZone).css('border', '1px solid #000000');
        $(dropZone).addClass('ssbUploaderDropZoneDragEnter');
    },
    dragLeave: function (e, dropZone) {
        /// <summary>Handles the DragLeave event</summary>
        /// <param name="e" type="Event">The event that has occurred</param>
        /// <param name="dropZone" type="DOM Element">The dropZone DOM element</param>
        $(dropZone).css('border', '0px none');
        $(dropZone).removeClass('ssbUploaderDropZoneDragEnter');
    },
    drop: function (e, dropZone) {
        /// <summary>Handles the Drop event</summary>
        /// <param name="e" type="Event">The event that has occurred</param>
        /// <param name="dropZone" type="DOM Element">The dropZone DOM element</param>
        $(dropZone).css('border', '0px none');
        $(dropZone).removeClass('ssbUploaderDropZoneDragEnter');
    }
};

//intialize SimplePopover for use
var AsyncUploader = new AsyncUploader();

What I am trying to do is create a custom drop zone that encompasses the AsnycUpload control and two label controls.  However, the default drop zone that the AsyncUpload also adds to the page is still added to the control as well, and as a result, the dragenter event of the default drop zone fires when you drag a file over the AsyncUpload elements (<ul> and <li> that have a dragenter event set).  I and several developers at my company have attempted to unbind the dragenter events, but it seems like they are impossible to do so.

[Phil Mattson]

I really need someone on the Telerik team to review this and offer me some advice on what to do.

[Hristo Valyavicharski]

Hi Phil,

To detach events from the default drag and drop zone try this javascript:

<script type="text/javascript">
    function OnClientAdded(sender, args) {
        $('.ruInputs').off('dragenter');
        $('.ruInputs').children().off('dragenter');
        $('.ruDropZone').off('dragenter');
        $('.ruDropZone').off('dragleave');
        $('.ruDropZone').off('drop');
        $('.ruDropZone').off('dragover');
    }

    $(document).bind('drop dragover', function (e) {
        e.preventDefault();
    });
</script>

Regards,
Hristo Valyavicharski
Telerik

[Erik]

Hi Hristo,

I have tried this solution but it does not seem to work. I am using this in combination with my own dropzone from this exampe: http://demos.telerik.com/aspnet-ajax/asyncupload/examples/draganddrop/defaultcs.aspx 
I only want to use the custom dropzone, not the one from the control.

Thanks,
- Erik

[Hristo Valyavicharski]

Hi Erik,

Could you attach your project. The provided code seems to be working correctly. Please find the attached sample.

Regards,
Hristo Valyavicharski
Telerik