标签: jquery-ui-sortable

基于属性'data-sort'在jQuery中对div进行排序?

如果我有几个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适合的位置,但我不确定这是否是最好的方法.

javascript jquery jquery-selectors jquery-ui-sortable

61
推荐指数
3
解决办法
9万
查看次数

使用jquery sortable时如何复制项目?

我正在使用这种方法http://jqueryui.com/demos/sortable/#connect-lists连接我拥有的两个列表.我希望能够从列表A拖动到列表B,但是当项目被删除时,我需要将原始列表保留在列表A中.我检查了选项和事件,但我相信没有类似的东西.任何方法?

jquery drag-and-drop list duplicates jquery-ui-sortable

57
推荐指数
5
解决办法
3万
查看次数

jQuery UI可排序滚动辅助元素偏移Firefox问题

我在Firefox 3.6中有一个jQuery UI 1.7.2可排序列表的问题,IE7-8工作正常.当我向下滚动一点时,辅助元素似乎有一个与我从鼠标指针向下滚动的高度相同的偏移量,这使得无法看到最初开始拖动的项目.我该如何解决这个问题或解决这个问题?如果没有修复什么是一个非常好的替代可拖动插件?

以下是我的可排序初始化参数.

$("#sortable").sortable( {placeholder: 'ui-state-highlight'  } );
$("#sortable").disableSelection();
Run Code Online (Sandbox Code Playgroud)

firefox jquery scroll offset jquery-ui-sortable

55
推荐指数
6
解决办法
3万
查看次数

Jquery可排序'更改'事件元素位置

有没有办法让助手的当前位置被拖到新位置?

$("#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具有相同的值!

我需要实现的是向用户突出显示"开始拖动元素"与"当前替换元素"之间的所有位置.一旦用户释放鼠标按钮更新发生,只有这时我才能获得新的位置,但是在鼠标释放之前我需要它.

jquery jquery-ui-sortable

54
推荐指数
2
解决办法
11万
查看次数

jquery UI sortable:如何更改"占位符"对象的外观?

http://jqueryui.com/demos/sortable/#placeholder中给出的示例中,占位符是拖动任何项目时显示的橙色框.

可以使用placeholder选项调整此元素- 但它只允许您修改元素的类,如下所述:http://jqueryui.com/demos/sortable/#options

我想更多地定制这个元素,例如通过以与向placeholder选项提供函数相同的方式向helper选项提供函数.

我需要改变什么(例如在sortable.js中)才能做到这一点?

jquery jquery-ui jquery-ui-sortable

49
推荐指数
2
解决办法
4万
查看次数

如何实现支持Bootstrap拖放的触敏,响应,可排序列表?

我有一个<ul>列表,我想进行排序(拖放).如何在现代浏览器和触摸设备中使用Bootstrap 3?

我正在尝试使用jqueryui-sortable与http://touchpunch.furf.com/结合使用; 它似乎工作,但它是hacky和jQueryUI不能很好地与Bootstrap.

如何在添加触摸屏支持时避免Bootstrap/jQueryUI冲突?

jquery-ui touch jquery-ui-sortable twitter-bootstrap

48
推荐指数
2
解决办法
8万
查看次数

jQuery UI Sortable,如何确定更新事件中的当前位置和新位置?

我有:

<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-ui jquery-ui-sortable

43
推荐指数
5
解决办法
4万
查看次数

以jQuery可排序的方式以编程方式移动项目,同时仍触发事件

我正在使用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不会触发它.

有谁知道如何触发可排序的更新事件?

javascript jquery jquery-ui jquery-ui-sortable

43
推荐指数
3
解决办法
2万
查看次数

Jquery可排序列表不会序列化,为什么?

我在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)

php jquery serialization jquery-ui-sortable

38
推荐指数
2
解决办法
3万
查看次数

Jquery - 通过孩子们的innerHTML对DIV进行排序

我有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/

任何帮助将由这个菜鸟赞赏.

html sorting jquery jquery-ui-sortable

37
推荐指数
2
解决办法
3万
查看次数