我有一个带有可拖动元素的 jquery ui 界面,当拖动时,只会自动滚动主窗口,而不是可排序的 div 容器。
我已经尝试了很多东西,将它们全部附加到这篇文章需要几个小时。
当非子可拖动元素位于可排序部分时,是否有任何可靠的方法可以强制可排序 div 自动滚动?
可拖动和可排序/可拖放的 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/>
有效的查询:
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*//
});
完整的 JSFIDDLE:
帮助澄清:
当然,当可排序列表变得太大时,垂直滚动条会变为活动状态,如果拖动源自可排序容器的元素,它会自动滚动。但是,当外部可拖动元素也在可排序容器内时,我希望它自动滚动。它曾经天生就有这个功能,但在某些时候我不确定,它失去了这个功能,我无法找回它。