Page 1 of 2 12 LastLast
Results 1 to 10 of 19

Thread: drag and drop into child iframe document

  1. #1

    Default drag and drop into child iframe document

    Im trying to drag and drop from one tree to another in a document which resides in a child iframe.

    can i do this with treeview or dd?

    from what ive tested sofar, the drag stops at the edge of the iframe


    thanks!

  2. #2
    Sencha User
    Join Date
    Apr 2007
    Posts
    6

    Default

    I've noticed the same behavior in the application I'm working on. I've got an iframe in the center panel of a layout, and I'd like to drag from the west panel into the center panel.

    If I set the size of the iframe to less than the entire size of the center panel, the StatusProxy animates over the center panel, but not the iframe.

    So everything is working as expected outside of the iframe. But the animation stops at the edge of the iframe, and notifyDrop is not fired if I release the mouse button on top of the iframe.

    I'm going to try and figure out a solution...

  3. #3
    Sencha User JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038

    Default

    DD between iframes or windows just isn't going to happen.
    Jeff Howden
    Ext JS - Support Team Volunteer
    [email protected]

  4. #4

    Default Dragging into an iframe eg a WYSIWYG editor

    Hi,
    Why isn't dragging elements to an iframe going to happen? Is it today possible in any way to make an element, eg a tree node in an Ext tree to be dragged into an iframe? I would appreciate any tips.

    This would for example be useful when you have a WYSIWYG (eg TinyMCE) editor in Firefox. These are normally implemented with an iframe since the only way to make the html editable in firefox is to set the entire document to editable.

    Today we are using normal a-tags that can be dragged into the editor but wishes to use Ext-components to dragged into the editor.

    Best Regards
    Henric

  5. #5
    Ext User dayext's Avatar
    Join Date
    Jul 2008
    Location
    Basel, Switzerland
    Posts
    46

    Question

    Ahoy
    We succeed to drag components over an iframe by adding the mouse event handlers of the parent DragDropMgr to the iframe's document (see sample code below). Offsets and drop zones are not covered yet.

    Dragging works as expected in FF but there's a problem in IE. Its document does no longer fire any mouseover events so it's not possible to access any drop zones.

    Interesting: If you add an alert in CQ.Ext.dd.DragDrop#handleMouseDown (in DDCore.js) it works in IE as well (bar the alert ...). So one thing we tried was to give the focus to the inner document but that didn't help.

    Right now I'm investigating if the disabling of text selection is the reason.

    So here are my two questions:

    1) Did someone else successfully implementing drag and drop over iframes (and could give me a hint)?

    2) I could not locate yet where the text selection is disabled in IE. I was disabling all "selectstart" and "unselectable" lines but still while dragging selection is somehow disabled in IE. Can you tell me where this happens?

    Thanks for your help
    stenz
    __________________
    Day Ext Developers


    The code we used for the iframe:

    var el = document.createElement("iframe");
    el.src = "x.html";
    el.name = "myFrame";

    var frame = new CQ.Ext.Element(el);
    var ddm = CQ.Ext.dd.DragDropMgr;
    frame.on("load", function() {
    var fDoc = frames["myFrame"].document;
    CQ.Ext.EventManager.on(fDoc, "mousemove", ddm.handleMouseMove,
    ddm, true);
    CQ.Ext.EventManager.on(fDoc, "mouseup", ddm.handleMouseUp,
    ddm, true);
    });



    To see if dropping would work simply simply add a mouseover/out event to any element of the inner document (x.html):

    <div onmouseover="this.style.color='pink';" onmouseout="this.style.color='';">drag here and see if the color changes</div>
    Day Ext Developers

  6. #6
    Ext User dayext's Avatar
    Join Date
    Jul 2008
    Location
    Basel, Switzerland
    Posts
    46

    Lightbulb

    We finally found a solution for the issue with IE. The problem was dragging of thumbnails of a data view. I simply changed the template of the data view and use now a DIV with a bg image instead of an IMG.

    Regrads, stenz
    Day Ext Developers

  7. #7

    Default Were you able to get this working?

    Hi, I'm currently doing something quite similar to you. Were you able to get this working? I tried the code you have here and was able to move a dataView node over the iFrame and the mouseover and mouseout events to fire like you said. Well it works in Firefox but not Safari. Anyway, one step at a time.

    I am to the point now where I'm trying to get the drop zones that are in the iFrame to receive the node I'm dragging. What did you set as the el for your drop zone and how did you write your getTargetFromEvent, onNodeEnter, etc. functions? Any help would be very appreciated.

  8. #8
    Ext User dayext's Avatar
    Join Date
    Jul 2008
    Location
    Basel, Switzerland
    Posts
    46

    Default

    Hi,
    to end our participation to this thread, I can give a generic overview of the solution we implemented. This is part of a business product so we won't provide any code.

    Concept is that Drag&Drop is managed in parent window, drop targets are requested to the iframe, positions are computed with parent constraints.

    By using DragDropMgr, we faced to a critical issue: IE freed scripts. Objects from iframe are referenced in the parent window and referenced are not properly cleaned up. So we did not use it! We extended DragSource class, re-implementing some methods from the DragDropMgr and taking care to properly cleanup all references.

    Maybe this will help someone to figure out this issue. We are working with Ext2.1.

    Alexc
    Day Ext Developers

  9. #9

    Default

    rudebwoy

    Hi, did you figure this out? I could do with an example to follow or at least to understand how I can "request drop targets" from the iframe.

    dayext

    Thank you very much for at least posting what you did, its greatly appreciated and has confirmed my thoughts on what I need to do next. Now, if only I can figure out how to do what I need to do!

    Coincidently I'm also in Basel Roll on the nicer weather or more exciting thunderstorms...

  10. #10

    Default

    I did actually figure this out eventually. It took a while to say the least.

    1) The first thing is to load ext in both the parent window and the iframe.

    2) Then after the iframe window is loaded (only after) create a drop zone, I do this from the parent window but using pointers to the iframe like so:
    Code:
    createDropZone: function(o) {
        var ifrm = Ext.isIE ? Ext.getDom('page_iframe').contentWindow : window.frames['page_iframe'];
        var doc = (Ext.getDom('page_iframe').contentDocument || window.frames['page_iframe'].document);
        var b_manualCheck = (!Ext.isGecko); // whether or not we need to manually check if the mouse is over the target during dragging
        var a_areas = ['content_area_1','content_area_2','content_area_3']; // for example purposes, these are the drop zone elements in the iframe
        var el = Ext.getBody(); // or the parent container of the iframe
    
        return new Ext.dd.DropZone(el, {
            ddGroup: 'content-area',
            s_targselect: '.content-area',
            
            // manually check if the mouse is over a drop zone while dragging
            getTarget: function(s_targselect, e, el) {
                // in our example the iframe is positioned at the top left of the browser so there is no need to 
                // add the left and top of the iframe to our coordinates.
                var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
                var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
                var box = el.getBox();
                var region = new Ext.lib.Region(box.y, box.x+box.width, box.y+box.height, box.x);
                var pt = new Ext.lib.Point(e.getPageX()+scrollLeft, e.getPageY()+scrollTop);
                if(region.contains(pt))
                    return true;
            },
            
            /* If the mouse is over a target node, return that node. This is
            provided as the "target" parameter in all "onNodeXXXX" node event handling functions */
            getTargetFromEvent: function(e) {
                console.log('getTargetFromEvent'+new Date().getTime());
                var contentArea;
                /* in certain browsers (non-Gecko ones as far as my tests so far) the getTarget method of events will not work 
                because the event is in a different window (or whatever) so we calculate if the mouse is over the element we
                want manually by checking the coordinates. */
                if(b_manualCheck){
                    var s_area_id;
                    for(var i=0;i<a_areas.length;i++){
                        s_area_id = a_areas[i];
                        if(this.getTarget(this.s_targselect, e, ifrm.Ext.fly(s_area_id))){
                            contentArea = ifrm.Ext.getDom(s_area_id);
                            break;
                        }
                    }
                } else
                    contentArea = e.getTarget(this.s_targselect);
    
                return contentArea;
            },
    
            // On entry into a target node, highlight that node.
            onNodeEnter : function(target, dd, e, data){ 
                console.log('onNodeEnter');
                ifrm.Ext.fly(target).addClass('dropzone');
            },
    
            // On exit from a target node, unhighlight that node.
            onNodeOut : function(target, dd, e, data){ 
                console.log('onNodeOut');
                // defer remove of the dropzone class so that it doesn't go before the drop happens
                ifrm.Ext.get(target).removeClass.defer(1,Ext.get(target),['dropzone']);
            },
    
            /* While over a target node, return the default drop allowed class which
            places a "tick" icon into the drag proxy. */
            onNodeOver : function(target, dd, e, data){
                return Ext.dd.DropZone.prototype.dropAllowed;
            },
    
            /* On node drop, we can interrogate the target node to find the underlying
            application object that is the real target of the dragged data.
            We can use the data set up by the DragZone's getDragData method to read
            any data we decided to attach. */
            onNodeDrop : function(target, dd, e, data){
                console.log('onNodeDrop');
                // do your work here
            
                return true;
            }
        });
    }
    3) Do like dayext said and handle mouse moves in the iframe from the parent window. We do this like so within the iframe:
    Code:
    var pExt = parent.Ext; // set pointer to Ext in the parent window
    var ifrm_doc = Ext.getBody();
    var s_ddStyle = Ext.isSafari ? 'browser' : 'custom'; // whether or not we are using default browser dragging or ext
    if(s_ddStyle == 'custom'){
        var pddm = pExt.dd.DragDropMgr;
        pExt.EventManager.on(ifrm_doc, 'mousemove',ddMouseMove, pddm, true);
        pExt.EventManager.on(ifrm_doc, 'mouseup',ddMouseUp, pddm, true);
    }
    4) Next you need to handle the mouse moves. I do this from the parent window but you can do it from the iframe instead:
    Code:
    // handles the mouse move event for dnd
    ddMouseMove: function(e) {
        if (! this.dragCurrent) {
            return true;
        }
        // update the xy of the event if necessary
        setDDPos(e);
        // *** Note that the 'this' scope is the drag drop manager
        this.handleMouseMove(e);
    }
    
    // handles the mouse up event for dnd
    ,ddMouseUp: function(e) {
        if (! this.dragCurrent) {
            return true;
        }
        // update the xy of the event if necessary
        setDDPos(e);
        // *** Note that the 'this' scope is the drag drop manager
        this.handleMouseUp(e);
    }
    5) And finally the setDDPos function mentioned in the code fragment above. It is necessary because the x and y coordinates of events being fired from the iframe will not take into account the fact that you could have scrolled up and/or down in the iframe. If there is no scrolling in your iframe then you don't have to worry about this. My iframe is positioned at the top left of the browser so I don't need to add the left and top of the iframe to any of these coordinates, if yours is not then you may need to do so in this function as well as the getTarget function above in the drag zone.

    Code:
    setDDPos: function(e) {
        if(Ext.isGecko){
            var doc = (Ext.getDom('page_iframe').contentDocument || window.frames['page_iframe'].document);
            var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
            var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
            e.xy = [e.xy[0]-scrollLeft, e.xy[1]-scrollTop];
        }
    }
    6) Good luck! This was not easy to do and after literally days of scouring the internet I don't think many people are doing it.

Page 1 of 2 12 LastLast

Similar Threads

  1. Simple Drag&Drop Example
    By schmidetzki in forum Community Discussion
    Replies: 8
    Last Post: 21 Jun 2008, 4:05 PM
  2. Drag and drop sample
    By rodiniz in forum Community Discussion
    Replies: 7
    Last Post: 21 Jan 2008, 8:31 AM
  3. XmlDataModel drag and drop bug
    By nvosker in forum Ext 1.x: Bugs
    Replies: 6
    Last Post: 22 Jan 2007, 6:47 PM
  4. Bug in Drag and Drop
    By rodiniz in forum Ext 1.x: Bugs
    Replies: 6
    Last Post: 17 Nov 2006, 10:01 AM
  5. Drag-and-drop
    By kovtik in forum Ext 1.x: Help & Discussion
    Replies: 5
    Last Post: 6 Oct 2006, 7:06 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •