CODEWITHSUNDEEP
jqueryhtmljquery-uiiframejquery-ui-draggable
Jemai
Jemai

Reputation: 2849

Jquery UI Draggable iframe scroll issue does not work

It does not scroll downward if you set your iframe's height. I just want it to enable the scroll when dragging an element upward or downward.

$(".draggables .item-container .item").draggable({
  revert: "invalid",
  containment: "#selection",
  helper: "clone",
  scroll: true,
  iframeFix: true,
  scrollSensitivity: 100,
  scrollSpeed: 100
});

$(".droppables .item-container .item").droppable({
  accept: ".draggables .item-container .item",
  classes: {
    "ui-droppable-active": "ui-state-active",
    "ui-droppable-hover": "ui-state-hover"
  },
  drop: function(event, ui) {
    insertItem(this, ui.draggable);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div style="height: 178px; border: 1px solid #000;"></div>

<div id="container2">
  <iframe id="iframeBox" src="https://slm-promodesign.web.sd-svc.net/COA0036/coateschallenge?formForward=LOAD&t_mm=02&t_dd=27&t_hh=12&t_min=01" onload="resizeIframe(this);parent.scroll(0,0);" width="100%" scrolling="no" border="0" height="2000">
    </iframe>
</div>

<div style="height: 1024px; border: 1px solid #000;"></div>

I need help guys!

Upvotes: 0

Views: 591

Answers (1)

Chiller
Chiller

Reputation: 9738

First you need to set scrolling="yes"and then with css tricks you can hide the scroll bar outside the container.

See the result:

$(".draggables .item-container .item").draggable({
  revert: "invalid",
  containment: "#selection",
  helper: "clone",
  scroll: true,
  iframeFix: true,
  scrollSensitivity: 100,
  scrollSpeed: 100
});

$(".droppables .item-container .item").droppable({
  accept: ".draggables .item-container .item",
  classes: {
    "ui-droppable-active": "ui-state-active",
    "ui-droppable-hover": "ui-state-hover"
  },
  drop: function(event, ui) {
    insertItem(this, ui.draggable);
  }
});
#iframeBox {
  position: relative;
  right: -20px;
  border: 0;
}

#container2{
  border:1px solid;
  overflow:hidden;
}

#iframeBox html{
  margin-left:-20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div style="height: 178px; border: 1px solid #000;"></div>

<div id="container2">
  <iframe id="iframeBox" src="https://slm-promodesign.web.sd-svc.net/COA0036/coateschallenge?formForward=LOAD&t_mm=02&t_dd=27&t_hh=12&t_min=01" onload="resizeIframe(this);parent.scroll(0,0);" width="100%" scrolling="yes" border="0" height="400">
    </iframe>
</div>

<div style="height: 1024px; border: 1px solid #000;"></div>

Upvotes: 1

Related Questions