如果我有几个div:
<div data-sort='1'>div1</div>
<div data-sort='4'>div4</div>
<div data-sort='8'>div8</div>
<div data-sort='12'>div12</div>
<div data-sort='19'>div19</div>
Run Code Online (Sandbox Code Playgroud)
我动态创建div:
<div data-sort='14'>div1</div>
<div data-sort='6'>div1</div>
<div data-sort='9'>div1</div>
Run Code Online (Sandbox Code Playgroud)
我怎样才能让它们按顺序排列已经加载的div,而不必重新加载所有的div?
我认为我需要在屏幕上构建所有div的数据排序值数组,然后查看新div适合的位置,但我不确定这是否是最好的方法.
我正在使用这种方法http://jqueryui.com/demos/sortable/#connect-lists连接我拥有的两个列表.我希望能够从列表A拖动到列表B,但是当项目被删除时,我需要将原始列表保留在列表A中.我检查了选项和事件,但我相信没有类似的东西.任何方法?
我在Firefox 3.6中有一个jQuery UI 1.7.2可排序列表的问题,IE7-8工作正常.当我向下滚动一点时,辅助元素似乎有一个与我从鼠标指针向下滚动的高度相同的偏移量,这使得无法看到最初开始拖动的项目.我该如何解决这个问题或解决这个问题?如果没有修复什么是一个非常好的替代可拖动插件?
以下是我的可排序初始化参数.
$("#sortable").sortable( {placeholder: 'ui-state-highlight' } );
$("#sortable").disableSelection();
Run Code Online (Sandbox Code Playgroud) 有没有办法让助手的当前位置被拖到新位置?
$("#sortable").sortable({
start: function (event, ui) {
var currPos1 = ui.item.index();
},
change: function (event, ui) {
var currPos2 = ui.item.index();
}
});
Run Code Online (Sandbox Code Playgroud)
当实际变化发生时,似乎currPos1和currPos2具有相同的值!
我需要实现的是向用户突出显示"开始拖动元素"与"当前替换元素"之间的所有位置.一旦用户释放鼠标按钮更新发生,只有这时我才能获得新的位置,但是在鼠标释放之前我需要它.
在http://jqueryui.com/demos/sortable/#placeholder中给出的示例中,占位符是拖动任何项目时显示的橙色框.
可以使用placeholder选项调整此元素- 但它只允许您修改元素的类,如下所述:http://jqueryui.com/demos/sortable/#options
我想更多地定制这个元素,例如通过以与向placeholder选项提供函数相同的方式向helper选项提供函数.
我需要改变什么(例如在sortable.js中)才能做到这一点?
我有一个<ul>列表,我想进行排序(拖放).如何在现代浏览器和触摸设备中使用Bootstrap 3?
我正在尝试使用jqueryui-sortable与http://touchpunch.furf.com/结合使用; 它似乎工作,但它是hacky和jQueryUI不能很好地与Bootstrap.
如何在添加触摸屏支持时避免Bootstrap/jQueryUI冲突?
我有:
<ul id="sortableList">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
Run Code Online (Sandbox Code Playgroud)
我已连接到update: function(event, ui) { }但不知道如何获得元素的原始和新位置.如果我将项目3移动到项目1之上,我希望原始位置为2(基于0的索引)并且项目3的新位置为0.
我正在使用jQuery Sortable.我有这样的HTML设置:
<ul id='plan'>
<li class='item'>1</li>
<li class='item'>2</li>
<li class='item'>3</li>
<li class='item'>4</li>
</ul>
Run Code Online (Sandbox Code Playgroud)
我想以编程方式将其移动<li>到不同的位置.我可以使用以下JS实现这一点:
$("#plan li:eq(1)").insertAfter($("#plan li:eq(2)"));
Run Code Online (Sandbox Code Playgroud)
这工作正常,但它不会触发可更改或更新等可排序事件.我有一个在sortable的update事件上运行的函数,但用JS移动li不会触发它.
有谁知道如何触发可排序的更新事件?
我在Zend Framework应用程序中使用jquery实现了一个可排序的图像列表.我只是不能让.sortable('serialize')方法返回多个空字符串.
当我在我的应用程序之外尝试一些简单的例子时,它可以工作.
下面的代码段包装在各种其他标签和其他标签中是否重要?我认为不应该.无序列表应该只能通过id找到,对吧?
HTML:
<ul id="mylist">
<li id="1">
<div>
<img src="image_1.jpg" />
<p class="value_item">some text</p>
</div>
</li>
<li id="2">
<div>
<img src="image_2.jpg" />
<p class="value_item">some text</p>
</div>
</li>
</ul>
Run Code Online (Sandbox Code Playgroud)
JavaScript的:
$(document).ready(function() {
$('#mylist').sortable({
update: function() {
var order = $('#mylist').sortable('serialize');
alert(order);
}
});
});
Run Code Online (Sandbox Code Playgroud) 我有html看起来像这样:
<div id="sortThis">
<div id="1">Price:<span class="price">20</span><span class="style">blue</span></div>
<div id="2">Price:<span class="price">23</span><span class="style">red</span></div>
<div id="3">Price:<span class="price">10</span><span class="style">red</span></div>
<div id="4">Price:<span class="price">29</span><span class="style">green</span></div>
<div id="5">Price:<span class="price">35</span><span class="style">blue</span></div>
</div>
Run Code Online (Sandbox Code Playgroud)
我希望能够按.price或.style排序
我怀疑这篇文章部分回答了我的问题:基于属性'数据排序'在Jquery中排序Div?
这个插件接近于我所需要的(因为它可以处理子属性)但它似乎没有像孩子们的内部HTML那样:http://tinysort.sjeiti.com/
任何帮助将由这个菜鸟赞赏.