0

I'm having an issue with jquery ui drag/drop. I need to drag element into an iframe which contains droppable area inside. When I drag item on the left side and drop to iframe, it didnt work as I expected. That looks like exactly this fiddle:

jsfiddle.net/8Jwxv/66/

JS

$('#my-frame').load(function () {
    $('.draggable').draggable({
        appendTo: 'body',
        helper: 'clone',
        iframeFix: true,
        revert: 'invalid',
        connectToSortable: $('#my-frame').contents().find('.sortable'),
        cursorAt: { top: 10, left: 0 }, 
        drag: function(event,ui){
            console.log(ui.offset);
        }
    });

    $('#my-frame').contents().find('.sortable').sortable({
        iframeFix: true,
        cursorAt: { top: 0, left: 0 } 
    });
});
$('.draggable').on('dragstop',autoResize);


function autoResize(){
    var newheight;
    if(document.getElementById){
        newheight=document.getElementById('my-frame').contentWindow.document .body.scrollHeight;
    }
    newheight=newheight+100;
    $('#my-frame').css('height',newheight);
}

Can you help me to fix this? Thanks

Huginn
  • 480
  • 2
  • 6
  • 21
anhnt
  • 729
  • 1
  • 10
  • 18
  • You can't drag an element to an iframe easily. Did you look at : http://jqfaq.com/how-to-implement-drag-and-drop-between-iframes/. – Vincent Decaux Jul 30 '15 at 07:54
  • Did you check the fiddle and see the wrong position when dragging item? I think there is an issue when calculating position of dragging element – anhnt Jul 30 '15 at 07:58
  • Ok didn't see it works, maybe you can look here : http://blog.craigsworks.com/jquery-ui-draggable-droppables-in-an-iframe/ – Vincent Decaux Jul 30 '15 at 08:30
  • @VincentDecaux it worked. but its not the way I expected. You can drag element left to the iframe and see the effect. I have tried the solution that on the blog you posted but there no better result – anhnt Jul 30 '15 at 08:43
  • 1
    Yes it's an offset issue. Weird ! I try some things on your code, without success. I used "iframeOffset" property in draggable. Cannot help you sorry :( – Vincent Decaux Jul 30 '15 at 08:48

2 Answers2

0

Ok the problem come from your iframe's width. Can you put in "px" more than in "%" ?

Look this fiddle, the offset is good :

http://jsfiddle.net/8Jwxv/68/

#my-frame {
    width: 500px;
    height: 300px;
    position: absolute;
    right: 0px;
}
Vincent Decaux
  • 9,857
  • 6
  • 56
  • 84
0

I had the same problem and only solution i found is here: http://maxazan.github.io/jquery-ui-droppable-iframe/

Just link js file and it should works absolutely perfect

mrfazolka
  • 780
  • 1
  • 7
  • 24