search

ducksboard / gridster.js

gridster.js is a jQuery plugin that makes building intuitive draggable layouts from elements spanning multiple columns
http://gridster.net/
MIT License
6.04k stars 1.2k forks source link

How to put a widget when the cursor was moved out of the other iframe #411

Open TakahashiTe opened 10 years ago

TakahashiTe commented 10 years ago

Hello. Thanks for giving us gridster!

I wanna use gridster with iframes, but I can't put a widget (been dragging) when the cursor was moved on the other iframe.

my page is like below: <html> <table> <tr>...</tr> <tr> <td> <iframe> <html> <ul>...</ul> ...

After dragging cursor out of the iframe and release the left button, the widget is still following the cursor. I know that a solution against this problem is clicking somewhere in the iframe. But I need preventive measures.

Give me your idea. I appreciate your favor. Thank you.

Daijobou commented 10 years ago

Without a jsfiddle I don't think that you get help. ;)

TakahashiTe commented 10 years ago

Daijobou, thank you for advice!

I made a simple jsfiddle (using gridster demo page, sorry). http://jsfiddle.net/TTKi/awapd23L/24/

When you drag a widget to out of the iframe and release your left button, the widget won't be put. and if the cursor is back on the grid, the widget is still following without left button.

I think there are two ways to prevent this problem. a. prohibiting that widgets are dragged out, or b. making widgets can follow out of ifame

Daijobou commented 10 years ago

Now I can see what you mean. Additional information:

Firefox and Opera its works without problems. Only Chrome and Internet Explorer have problems with it.

TakahashiTe commented 10 years ago

Great Thanks!

I tried some browsers. it works on Firefox 31. and the problem appears on IE11, Chrome 36, Opera 23, Safari 5.1.7. (my PC is running by Windows 7) "Opera", you said, is old Presto version? I think current versions are made with Blink, it's same as Chrome.

So... should I reconsider using gridster with iframe?

Daijobou commented 10 years ago

I have Opera 12.10.

I think Firefox and Opera(12.10) is a bug. The Iframe should never know what happen outside of it. Its a security risk.

TakahashiTe commented 10 years ago

"security risk", that's exactly.

Here is a forum for gridster, "iframe" is not about gridster. Sorry. I think that the way to prevent this problem with gridster features is putting down widget with any events or triggers, however mouse button is still pressed. Can I make it?

Daijobou commented 10 years ago

When your iframe is from the same domain, you can try something like:

$('#yourFrame').mouseleave(function() {
    var gridster = $(this).contents().find(".gridster").first();
    if (gridster.length>0)
    {
        gridster.trigger('mouseup');
    }
});
TakahashiTe commented 10 years ago

You fix it perfectly! "mouseleave", a good event :)

and I changed the selector like

$("iframe", parent.document).mouseleave(function() {...}

Really really thank you for solve this problem.

hrosenbauer commented 10 years ago

Another solution that we use: add a transparent div element over all iframes when dragging starts and hide them again when dragging stops - works perfectly.