1

I'm having quite a bit of trouble resolving problems with offsets related to draggable elements being dropped into a sortable area within an iFrame.

The following leaned-down example to demonstrates the problem here.

Make sure to keep your window fairly narrow, as otherwise it's very difficult to drop the elements into the iFrame at all. It should be pretty obvious that you cannot drag the item and drop it in the designated place, instead you must drag about 350 pixels to the right of the leftmost border, after which the sortable will accept the draggable.

I've tried quite a few things here already, but thus far I have been unable to narrow down the problem. I'm not even entirely sure I understand the source of the problem, just knowing that would allow me to possibly write a plugin that could correct this issue.

There have been a few people who've asked this question before, but the solutions offered are not exactly production-ready, usually simplistic workarounds. I need something more comprehensive here, something that will entirely eliminate the offset issue, and allow draggables to be received by sortables similar to how existing sortable elements are received by other sortables.

Improve this question
10
  • Can describe "offset issue" ? What is expected result ?
    – guest271314
    Commented Jan 21, 2016 at 3:58
  • I have updated the description to indicate that when you drag to the sortable area, that the draggable is not recognized by the sortable. However dragging about 300 pixels to the left of the shortable IS recognized. The 300 pixels seemingly is the offset of the iframe with respect to 0,0 (upper left corner of the browser).
    – kamelkev
    Commented Jan 21, 2016 at 4:39
  • @kamelkev first of all is iframes supported by jQuery ui sortable widget..? If so did you check whether any bug reports exist regarding this issue..? if none, have you tried filing a bug report with a minimal reproducible example..?
    – T J
    Commented Jan 21, 2016 at 7:05
  • Hi TJ. There are options for the widgets such as "iframeFix" that are specifically advertised to assist with working with iframes. In addition I have read through literally every line of the module, and there are many allocations taken to work with iframes. Finally, yes, I do have a bug report filed. That is all besides the point however, other people have made this work in the past, so there must be a way to do it, either through a hack or a proper technique. I see you also have filed bugs with jqueryui for similar issues, so you know how far that route gets you.
    – kamelkev
    Commented Jan 21, 2016 at 17:41
  • 1
    Worth noting that drag and drop into an iframe is one of the only legitimate purposes for HTML5 drag and drop. I wrote a from scratch library that works pretty well.
    – kamelkev
    Commented Sep 22, 2016 at 5:14

1 Answer 1

Reset to default
0

It's sadly not supported. See https://bugs.jqueryui.com/ticket/15047

To archive the same via HTML5 sortables you can use RubaXa's sortable. See https://github.com/RubaXa/Sortable

The JavaScript is configured like this:

$('#inner-iframe').load(function () {

var elOuter = document.getElementById('outer-draggables');
Sortable.create(elOuter, {
    group: 'sortable-group'
});

var elInner = document.getElementById('inner-iframe').contentWindow.document.getElementById('sortable');
Sortable.create(elInner, {
    group: 'sortable-group'
});

var elInner2 = document.getElementById('inner-iframe').contentWindow.document.getElementById('sortable2');
Sortable.create(elInner2, {
    group: 'sortable-group'
});

});

See http://jsfiddle.net/vdyd3nhw/3/

Improve this answer
1
  • 1
    For future pagebuilder developers reading this, the RubaXa plugin certainly makes it work, only downside: you can't drag an element and have a different 'helper' and dropped content for that element with this..
    – Brainfeeder
    Commented Mar 12, 2018 at 15:00

Not the answer you're looking for? Browse other questions tagged or ask your own question.