0

I have the following html structure.

<div class="data-layout"> --> with a width of say 1600px
    <div class="recource-calendar"> --> with a width of 9000 px, overflow-x:scroll

    </div>
</div>

Inside $('.recource-calendar') I have numerous smaller div elements that I want to drag anywhere in $('.recource-calendar'). Unfortunately if I drag the objects to the right the window moves left, but the $('.recource-calendar') does not scroll, the whole window just moves.

My draggable options are initialised as follows:

#('.draggable-element').draggable({
                containment: '.recource-calendar',
                scroll: true,
                scrollSensitivity: 100,
                helper: function(event, ui) {
                    if(_this.model.get('parentId')) {
                        return _this.buildRangeBookingElement();
                    } else {
                        return $(_this.el).clone();
                    }
                },
                opacity: "0.7",
                start: function (event, ui) {
                    $(ui.helper).addClass("ui-booking-draggable-helper");
                },
                revert: function (dropped, ui) {
                    if (dropped === false) {
                        // Drop was rejected, revert the helper.
                        $('.wb-resource-booking-inner').removeClass('hover-draggable');
                        return true;
                    } else {
                        // Drop was accepted, don't revert.
                        return false;
                    }
                }
                stop: function (event, ui) {
                }
            });

What I want to happen is that when I move a draggable element beyond the visible area of $('.recource-calendar') that $('.recource-calendar') scrolls.

I am sure this question must have been covered before, but I have not found an answer yet.

sophia
  • 71
  • 4
  • This will help you http://stackoverflow.com/questions/5791886/jquery-draggable-shows-helper-in-wrong-place-after-page-scrolled?answertab=active#tab-top – Parth Trivedi Jan 07 '16 at 11:45
  • Please tell us the jQuery UI version you are using and also the css of `draggable_element` – rhitz Jan 07 '16 at 11:45
  • I am using a very old version of the ui version 1.10.4 and the CSS for my draggable element is: width: 160px; margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; – sophia Jan 07 '16 at 12:38

0 Answers0