jQuery UI可对拖动元素进行排序
jQuery UI Sortable snap on drag element
在拖动元素时是否有任何方法可以捕捉到?例如,元素本身太大,当我拖动它,所以它将只显示它的小副本。或者如果我开始拖动元素但我想在拖动时显示不同的内容
使用helper
函数可以控制拖动的元素:
$(function() {
$( "#sortable" ).sortable({
helper: function(ev, ui) {
return ui.clone().text('This item is currently being dragged')
}
});
$( "#sortable" ).disableSelection();
})
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<ul id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
相关文章:
- 按类别排序;元素有多个类别(同位素.js)
- 基于比较子元素内容和目标标题内容的Javascript排序元素
- jQuery - 将元素拖入 DIV / 或可排序元素
- 排序元素折叠和内容重新加载
- “appendTo”-方法在将可拖动元素连接到 jQueryUI 中的可排序元素时无法正常工作
- 使用按钮单击将 jQuery UI 可排序元素设置为第一个位置
- 如何使jQuery中的图像可排序元素可拖动
- Greasemonkey脚本和排序元素
- 如何将可排序元素拖动到其他可排序元素中
- jQuery排序元素,移除、分离、克隆、附加内存泄漏
- jQuery根据标签重新排序元素
- 使用jquery排序元素
- 如何样式化可排序元素的初始位置
- 如何根据对应的元素重新排序元素'在Javascript/Jquery中的顺序
- 排序元素jQuery插件,随机排序
- 用for排序元素.In和每个循环
- Rails通过单击按钮排序元素
- JQuery Sortable:使可排序元素不可拖动,但可排序
- 使用jQuery使用数据属性排序元素
- 如何更改可排序元素'拖动时的样式