0

I have a jquery ui interface with draggable elements that, when dragged, only auto scrolls the main window, instead of the Sortable div container.

I have tried so many things it would take hours to append them all to this post.

Is there any reliable way to force a sortable div to auto scroll when a non-child draggable element is in the sortable section?

DRAGGABLE AND SORTABLE/DROPPABLE'S HTML:

<div class="objectPaletteHolder">
    <ul>
        <li id="draggable" class="ui-state-highlight">
            <table class="subObjectTable">
                <tr><td class="objectName" colspan="5">Title</td></tr>
                <tr><td class="rightAlign">Text: </td><td colspan="4"><input type="text" maxlength="500" name="titleValue" /></td></tr>
                <tr><td class="rightAlign">Alignment: </td><td><input type="radio" class="titleAlignmentLeft" name="titleAlignment" value="left" /></td><td><input type="radio" class="titleAlignmentCenter" name="titleAlignment" value="center" checked="checked" /></td><td><input type="radio" class="titleAlignmentRight" name="titleAlignment" value="right" /></td><td><input type="radio" class="titleAlignmentJustify" name="titleAlignment" value="justify" /></td></tr>
                <tr><td></td><td class="smallText">Left</td><td class="smallText">Center</td><td class="smallText">Right</td><td class="smallText">Justify</td></tr>
            </table>
        </li>
        <li id="draggable2" class="ui-state-highlight">Paragraph</li>
        <li id="draggable2" class="ui-state-highlight">Link</li>
        <li id="draggable2" class="ui-state-highlight">Image-Link</li>
        <li id="draggable2" class="ui-state-highlight click">Line-Break</li>
    </ul>
    <ul>
        <li id="draggable" class="ui-state-highlight">Sub-Title</li>
        <li id="draggable2" class="ui-state-highlight">Text</li>
        <li id="draggable2" class="ui-state-highlight">Image</li>
        <li id="draggable2" class="ui-state-highlight">Bullet-Line</li>
    </ul>
</div>
<div class="editContainer">
    <ul id="sortable">
        <li class="ui-state-default">Item 1</li>
        <li class="ui-state-default">Item 2</li>
        <li class="ui-state-default">Item 3</li>
        <li class="ui-state-default">Item 4</li>
        <li class="ui-state-default">Item 5</li>
    </ul>
</div>
<br/><br/>

VALID JQUERY:

jQuery(function ($) {

    //DRAG, DROP, AND SORTABLE CODE *START*//
    $("#sortable").sortable({
        revert: true,
        receive: function (event, ui) {

        },
        change: function (event, ui) {
            //Place code that triggers on the sortable list being changed here.
            //Note, DO NOT allow alerts in this function. It breaks the dragging/dropping fluidity.
        }
    }).droppable({});

    $("#draggable, #draggable2").draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
    });

    $("ul, li").disableSelection();
    //DRAG, DROP, AND SORTABLE CODE *END*//
});

FULL JSFIDDLE:

http://jsfiddle.net/dMen8/16/

TO HELP CLARIFY:

When the Sortable list grows too large the vertical scrollbar becomes active, of course, and if dragging an element that originated within the sortable container, it auto-scrolls just fine. However, I want it to autoscroll, when an outside draggable element is within the sortable container, as well. It used to have this functionality inherently, but at some point I'm not sure of, it lost this functionality and I can't get it back.

VoidKing
  • 6,282
  • 9
  • 49
  • 81
  • perhaps this question might help u http://stackoverflow.com/questions/14241994/jquery-ui-draggable-not-scrolling-the-sortable-container – Mandeep Jain Sep 14 '13 at 11:17
  • @MandeepJain Thank you for trying to help me. It is much appreciated. However, I tried the solution in the post you referred me to. Unfortunately, though, it did not solve the issue at hand. – VoidKing Sep 16 '13 at 13:24
  • yup, i tried to solve ur problem, but it didnt work out and I had other work, so linked you to the question itself :) – Mandeep Jain Sep 16 '13 at 13:50
  • @MandeepJain Well, I appreciate any time you spent trying to help. No one else wanted to even look at it :) I wanted to make a nice drag & drop interface for some users to be able to edit pages, but after working with multiple problems I just couldn't workaround or solve, I decided to give up and remove it. I got it looking really nice, but you can't keep radio buttons ticked, or get the scrollbar working, and many other nit-picky, yet necessary things. I think these particular jquery-ui plugins have a long way to go before they will really work in most practical settings. – VoidKing Sep 16 '13 at 16:56
  • @MandeepJain Really, though, thank you for trying to help. I know time is precious :) – VoidKing Sep 16 '13 at 16:57

0 Answers0