标签: jquery-ui-sortable

这让我很难过.以下代码返回",,,,,,":

<script type="text/javascript">
$(function() {
    $('#listB').sortable({
        connectWith: '#listA',
        update: function(event, ui) {
            var result = $(this).sortable('toArray');
            alert(result);
            }
    });
    $('#listA').sortable({
        connectWith: '#listB'
    });
});
</script>

<div id="boxA">
    <ul id="listA" class="myList">
        <li value="1">Item A</li>
        <li value="2">Item B</li>
        <li value="3">Item C</li>
        <li value="4">Item D</li>
        <li value="5">Item E</li>
        <li value="6">Item F</li>
        <li value="7">Item G</li>
    </ul>
</div>

<div id="boxB">
    <ul id="listB" class="myList">
        <li value="1">Item A</li>
        <li value="2">Item B</li>
        <li value="3">Item C</li>
        <li value="4">Item D</li>
        <li value="5">Item E</li>
        <li value="6">Item F</li>
        <li value="7">Item G</li>
    </ul> …

我的页面底部有一个可排序的无序列表,在Firefox中非常适用.但是,在Safari/Chrome中,当我想拖动时,抓取的listitem会立即跳到页面顶部,就像UL在窗口顶部一样.有谁知道这里发生了什么？

谢谢.莱克斯.

这是代码:

HTML(和PHP):

<ul id="list">
    <?
        foreach($downloads as $download)
        {
            echo "<li class='downloads'><a rel='".$download->id."' href='".$base_url."downloads/".$download->id."'>".$download->title."</a></li>";
        }
    ?>
</ul>

CSS:

ul#list {
    padding: 10px 0;
    display: block;
}
ul#list li {
    background: #fff;
    padding: 10px;
    color: #bc1e2c;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    font-weight: bold;
    margin: 10px 0;
    display: block;
}

ul#list li:hover {
    background: #212121;
    color: #fff;
    cursor: move;
}

JS:

$(".alter-content ul#list").sortable({
    update : saveSortorder,
    containment: 'parent'
});

我正在使用可排序的小部件来重新排序项目列表.将项目拖动到新位置后,我将AJAX表单发布到服务器以保存新订单.如果从服务器收到错误消息,如何撤消排序(例如,将拖动项返回到列表中的原始位置)？

基本上,如果服务器确认更改已保存,我只希望重新订购"坚持".

绝对常见的可排序案例:

<script>
$(function() {
  $("#sortable").sortable();
});
</script>

<ul id="sortable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

问题.需要在某些条件下取消拖动项目并且Andrew Whitaker有一个很好的建议 ,但这种方法仅适用于jquery-ui-draggable并且无法进行排序:

$("#sortable").sortable({
  start: function() {
    return false; // will still cause `this.helper is null`
  }
});

对建议会很有帮助.

以下是JavaScript的有趣用法:使用拖放重新排序项目.我的页面中的实现本身工作正常,但有没有办法确定用户放置项目的顺序？

我问,因为我想加载并保存cookie中的商品订单.

我在标记插件上使用jQuery的可排序,该插件维护一个与li实际项目顺序相关的对象数组.

我需要在排序完成时更新数组中项目的顺序.

我以为我能够在启动事件调用$(ui).index()和更新事件中调用相同的内容,这将给我初始位置和最终位置,但两个调用都返回-1.

我该怎么做？

<ul>
<li>here<a class="close">x</a></li>
<li>are<a class="close">x</a></li>
<li>some<a class="close">x</a></li>
<li>tags<a class="close">x</a></li>
</ul>

数组结构:

[{
    label: 'here',
    value: 36,
    element: '$(the li that this info is about)',
    index: 0
},
{
    label: 'are',
    value: 42,
    element: '$(the li that this info is about)',
    index: 1
},
{
    label: 'some',
    value: 21,
    element: '$(the li that this info is about)',
    index: 2
},
{
    label: 'tags',
    value: 26,
    element: '$(the li that this …

如何检查特定列表是否可排序？喜欢$('#list').is(':sortable')......？

如果我们将使用

if ($('#list').sortable()) 

然后列表将再次排序,而不是检查它是否可以排序.

我有两个列表 #sortable1,#sortable 2它们是连接的sortables,如本例所示.

您可以将列表项拖放sortable1到sortable 2.但是,如果sortable 1中的项目包含类"number",我想阻止Sortable2的删除,从而使拖动的项目回退到可排序的1.

我在sortable2上使用了以下内容:

receive: function (event, ui) {
            if ($(ui.item).hasClass("number")) {
                $(ui.item).remove();
            }

但它会从两个表中删除列表项.任何帮助将不胜感激.

我正在使用jQuery和Sortable来安排我的项目列表(以及这个http://dragsort.codeplex.com).

一切都很完美.

我正在使用函数dragEnd来按顺序排列列表.

这是我的代码:

$("#list1, #list2").dragsort({ dragSelector: "div",
                               dragBetween: true,
                               dragEnd: saveOrder,
                               placeHolderTemplate: "<li class='placeHolder'><div></div></li>" });

function saveOrder() {
    var data = $("#list1 li").map(function() { return $(this).children().html(); }).get();
    $("input[name=list1SortOrder]").val(data.join("|"));
};

我的问题:无论如何,我在拖动时能做动画吗？或拖动时重新定位元素？我只需要它在Safari上工作.

一个例子是:

http://www.youtube.com/watch?v=U3j7mM_JBNw

看看拖放(0:30),你会看到我在说什么.

谢谢.

前言

当我使用draggables + sortables放置在浮动的,相对定位的父元素时,我遇到了一个问题,即可拖动的助手被错误地偏移了.浮动父元素是Bootstrap列,其中多个可排序列表放在一列中,而可拖动列表放在另一列中.

例

这是一个工作示例代码段

$('.sortable').sortable({
  connectWith: '.sortable',
  revert: 600,
  forcePlaceholderSize: true,
  placeholder: 'ui-sortable-placeholder',
  tolerance: 'pointer'
}).disableSelection();

$('.draggable').draggable({
  connectToSortable: '.sortable',
  helper: 'clone',
  revert: true
}).disableSelection();

.sortable-container {
  display: inline-block;
  width: 100px;
  vertical-align: top;
}
.sortable {
  cursor: move;
  margin: 0;
  padding: 0;
  list-style-type: none;
  vertical-align: top;
  border: 1px solid #000;
}
.ui-sortable-placeholder {
  background: #ff0000;
}
#draggables {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.draggable {
  margin: 4px;
  cursor: move;
  color: #fff;
  background: #5dd1ff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" …