CODEWITHSUNDEEP
jqueryjquery-uiiframejquery-ui-sortable
parag
parag

Reputation: 29

drag and connectToSortable into sortable DIV inside the iframe

I was trying to drag a element from main page to a iframe inside it with sortable div inside frame

i was able to make div sortable and connect draggable to sortable inside it but the position the element is dropped is computed wrong and sorted at wrong place

may be because the mouse coordinates inside iframe have different position with main page

Upvotes: 2

Views: 637

Answers (1)

mike
mike

Reputation: 2308

Carefully Read this jQueryUI bug ticket. You'll see that jQueryUI "... does not support cross-window dragging".
So that being said, as suggested in the bug ticket, you can modify the internal code in jQueryUI to do most of what you want. I implemented as suggested and it worked well as long as there was NO SCROLLING in the iFrame. Once the iFrame scrolled, all bets were off, which I suspect is the reason jQueryUI does not support this feature ;-).

1). Somewhere around line 2964 of the (not minified) jquery-ui.js file, directly following the line that reads m[i].offset = m[i].element.offset(); add the code:

  // handle iframe scrolling
  m[i].offset.top -=  m[i].element.parents().find("html,body").scrollTop();
  m[i].offset.left -=  m[i].element.parents().find("html,body").scrollLeft();

  // iframe positioning 
  if( this.current.options.iframeOffset )
  {
    m[i].offset.top +=  this.current.options.iframeOffset.top;
    m[i].offset.left +=  this.current.options.iframeOffset.left;
  }

2). In your call to .draggable(), add the options:

draggable.({
  iframeFix: true, 
  iframeOffset: $("#yourIframeID").offset()
 });

3). Make sure you are creating your "droppable" from the parent window, once the iFrame loads:

$("#yourIframeID").load(function () {
      $(this).contents().find('<yourDroppableItemSelector>').droppable({
                                hoverClass: "landingHover",
                                iframeFix: true,
                                drop: function (event, ui) {
                                    $(this).css("background-color", "lightsalmon");
                                }
                            });
                        });

The hoverClass option is not necessary, but it really helps users to make the droppable area highlight on hover, that way if things arn't quite lining up, it is still usable ;-), the whole thing is a hack, so for me just getting close was good enough.

Upvotes: 0

Related Questions