mobileFX WebKitX CEF3 ActiveX 4.x
WebKitXCEF3Lib ActiveX Control / WebKitXCEF3 Object / OnDragEnter Event

DragDataObject struct containing the drag-in or drag-out data.

Verb of a drag-and-drop operation as negotiated between the source and destination. These constants match their equivalents in WebCore's DragActions.

Set to True to cancel the drag operation.

In This Topic
    OnDragEnter Event
    In This Topic
    Description

    Set various HTML formats to an OLE Drag-and-Drop or Clipboard IDataObject instance.

    Syntax
    Visual Basic
    Public Event OnDragEnter( _
       ByRef DragData As DragDataObject, _
       ByVal mask As DRAG_DATA_MASK, _
       ByRef Cancel As Boolean _
    )
    Parameters
    DragData

    DragDataObject struct containing the drag-in or drag-out data.

    mask
    ValueDescription
    DRAG_COPY

    Copy operation is permitted.

    DRAG_DELETE

    Delete operation is permitted.

    DRAG_EVERY

    Every operation is permitted.

    DRAG_GENERIC

    Reserved.

    DRAG_LINK

    Link operation is permitted.

    DRAG_MOVE

    Move operation is permitted.

    DRAG_NONE

    No operation is permitted.

    DRAG_PRIVATE

    Reserved.

    Verb of a drag-and-drop operation as negotiated between the source and destination. These constants match their equivalents in WebCore's DragActions.

    Cancel

    Set to True to cancel the drag operation.

    Remarks

    The event is fired when an external drag event enters the browser window. DragData contains the drag event data and Mask represents the type of drag operation.

    Set Cancel to True to cancel the drag event.

    In a web page, there are certain cases where a default drag behavior is used. These include text selections, images, and links. When an image or link is dragged, the URL of the image or link is set as the drag data, and a drag begins. For other elements, they must be part of a selection for a default drag to occur. To see this in effect, select an area of a webpage, and then click and hold the mouse and drag the selection. An OS-specific rendering of the selection will appear and follow the mouse pointer as the drag occurs. However, this behavior is only the default drag behavior, if no listeners adjust the data to be dragged.

    When dragging, there are several operations that may be performed. The copy operation is used to indicate that the data being dragged will be copied from its present location to the drop location. The move operation is used to indicate that the data being dragged will be moved, and the link operation is used to indicate that some form of relationship or connection will be created between the source and drop locations.

    Example
    Private Sub WebKitXCEF31_OnDragEnter(DragData As WebKitXCEF3Lib.DragDataObject, ByVal mask As WebKitXCEF3Lib.DRAG_DATA_MASK, Cancel As Boolean)
    
        DragData.IsFragment = True
        DragData.FragmentHtml = "<a>hello</a>"
        DragData.FragmentText = "hello"
    
    End Sub
    ///////////////////////////////////////////////////////////////////////////
    function AttachDragDrop()
    {
    	$("#x-w2ui-root, #x-w2ui-root .w2ui-panel, #x-w2ui-root .w2ui-page, #x-w2ui-root .w2ui-panel-content, #x-w2ui-controllers").addClass("x-w2ui-designer-drop-target");
    
    	var drop_targets = $(".x-w2ui-designer-drop-target");
    	drop_targets.unbind("dragover", OnDesignerDragOver).bind("dragover", OnDesignerDragOver);
    	drop_targets.unbind("dragenter", OnDesignerDragEnter).bind("dragenter", OnDesignerDragEnter);
    	drop_targets.unbind("dragleave", OnDesignerDragLeave).bind("dragleave", OnDesignerDragLeave);
    	drop_targets.unbind("dragend", OnDesignerDragEnd).bind("dragend", OnDesignerDragEnd);
    	drop_targets.unbind("drop", OnDesignerDragDrop).bind("drop", OnDesignerDragDrop);
    
    	AttachHitTest();
    }
    
    ///////////////////////////////////////////////////////////////////////////
    function DettachDragDrop()
    {
    	$(".x-w2ui-designer-drop-target").removeClass("x-w2ui-designer-drop-target");
    
    	var drop_targets = $(".x-w2ui-designer-drop-target");
    	drop_targets.unbind("dragover", OnDesignerDragOver);
    	drop_targets.unbind("dragenter", OnDesignerDragEnter);
    	drop_targets.unbind("dragleave", OnDesignerDragLeave);
    	drop_targets.unbind("dragend", OnDesignerDragEnd);
    	drop_targets.unbind("drop", OnDesignerDragDrop);
    }
    
    ///////////////////////////////////////////////////////////////////////////
    
    function OnDesignerDragEnd(e) { $("*").removeClass("over"); }
    function OnDesignerDragEnter(e) { $(".x-w2ui-designer-drop-target-selected").removeClass("x-w2ui-designer-drop-target-selected"); $(this).addClass("over"); e.preventDefault(); return false; }
    function OnDesignerDragLeave(e) { $(this).removeClass("over"); }
    function OnDesignerDragOver(e)
    {
    	$("#x-w2ui-designer-floating-toolbar").hide();
    	$(".x-w2ui-designer-hit-target, .x-w2ui-designer-drop-target-selected").removeClass("x-w2ui-designer-drop-target-selected");
    	$(this).addClass("over");
    	e.preventDefault();
    	return false;
    }
    
    ///////////////////////////////////////////////////////////////////////////
    // This code runs on Toolbox IFRAME, its purpose is to set the drag data.
    function OnDesignerDragStart(e)
    {
    	var script = $(e.target).parent().find("script")[0];
    	e.originalEvent.dataTransfer.setData("text/html", script.outerHTML);
    }
    
    ///////////////////////////////////////////////////////////////////////////
    function OnDesignerDragDrop(e)
    {
    	$(this).removeClass("over");
    	e.stopPropagation();
    
    	// Get parent node
    	var drop_target = $(e.currentTarget);
    	if (!drop_target.hasClass("x-w2ui-designer-drop-target")) return;
    	var alt_container = drop_target.find(".w2ui-panel-content");
    	if (alt_container.length) drop_target = alt_container;
    	var w2pselector = w2ui_control_selector(drop_target[0]);
    
    	// Get the dropped creation script
    	var html = e.originalEvent.dataTransfer.getData("text/html");
    	var script = $(html)[0].text;
    	var fn_init = eval(script);
    	var w2json = fn_init();
    
    	w2json.w2pselector = w2pselector;
    
    	w2ui_control_add(w2json);
    }
    See Also