标签: jquery-ui-sortable

如何从可排序列表中排除元素？举例来说,有使用类名称"笔记",我的元素并不想拖动？

    <ul class="sortable">

            <li id="item_3">Item 3</li>
            <li id="item_4">Item 4</li>
            <li id="item_5">Item 5</li>

            <p class="note">This is a note only</p> 
   </ul>

jquery ui sortable,jquery not显然不起作用......

$(function() {
    $( ".sortable:not(.note)" ).sortable(
    }).disableSelection();
});

我是jQuery的新手,我完全在使用jQuery UI sortable.

我正在尝试整理一个页面,以方便分组和订购商品.

我的页面有一个组列表,每个组都包含一个项目列表.我想让用户能够执行以下操作:

1. 重新排序组
2. 重新排列组内的项目
3. 在组之间移动项目

前两个要求没问题.我能够很好地对它们进行排序.问题在于第三个要求.我只是无法将这些列表相互连接.一些代码可能有帮助.这是标记.

<ul id="groupsList" class="groupsList">  
  <li id="group1" class="group">Group 1  
    <ul id="groupItems1" class="itemsList">  
      <li id="item1-1" class="item">Item 1.1</li>  
      <li id="item1-2" class="item">Item 1.2</li>  
    </ul>  
  </li>
  <li id="group2" class="group">Group 2  
    <ul id="groupItems2" class="itemsList">  
      <li id="item2-1" class="item">Item 2.1</li>  
      <li id="item2-2" class="item">Item 2.2</li>  
    </ul>  
  </li>
  <li id="group3" class="group">Group 3  
    <ul id="groupItems3" class="itemsList">  
      <li id="item3-1" class="item">Item 3.1</li>  
      <li id="item3-2" class="item">Item 3.2</li>  
    </ul>  
  </li>
</ul>  

我能够把对列表进行排序$('#groupsList').sortable({});,并$('.itemsList').sortable({});在document ready function.我尝试使用该connectWith选项sortable使其工作,但我失败了.我想做的是将每个groupItemsX列表连接到每个 …

jQuery UI(1.8+)正在形成一个很棒的库,但我发现它通常对我来说太过分了.是否有替代库用于创建具有较小占用空间的可排序列表？
排除占位符和交叉列表排序等功能是可以接受的.

编辑:(
这已成为一个有趣的讨论,感谢所有的回复.)
似乎有一些用户不知道jQuery UI可排序是什么.这不是表格排序,而是列表排列.想想重新订购Netflix队列.请参阅此处的演示:http://jqueryui.com/demos/sortable/

我试图让用户对这种标记进行排序

<div id="steps">
   <div class="sort">
       <span></span>
       <textarea/>
   </div>
   <div class="sort">
       <span></span>
       <textarea/>
   </div>
   <div class="sort">
       <span></span>
       <textarea/>
   </div>
   <div class="sort">
       <span></span>
       <textarea/>
   </div>
</div>

而我正在尝试这样:

$('.sort').sortable({placeholder: "ui-state-highlight",helper:'clone'}).disableSelection();

但我的行为非常出乎意料,请检查:

http://jsfiddle.net/GA4Qs/8/

我该怎么做只让用户按步骤编号排序？(但将整个项目排序为块)

是否可以锁定JQuery可排序列表中的列表项,使这些项保留在列表中的特定位置.

例如,

考虑这个带有锁定项目的伪列表......

item A
item B(locked)
item C(locked)
item D
item E
item F
item G(locked)

因此,我希望以一种方式修复项目B,C和G,如果用户在列表的开头拖放项目D,则项目A"跳过"固定/锁定的项目B和C结果如下......

item D
item B(locked)
item C(locked)
item A
item E
item F
item G(locked)

没有运气,我一直在寻找这样的东西.可能吗..？

在下面的更新功能的代码,当一个项目从列表中移出被调用两次sortable1到sortable2.虽然我只需要调用一次该函数:

$("#sortable1 tbody, #sortable2 tbody").sortable({
    connectWith: '.connectedSortable tbody',
    helper: fixHelper,
    handle : '.handle',
    update : function () {
        var order = $('#sortable1 tbody').sortable('serialize');
    }    
}).disableSelection();

我想tr's在桌子上排序.

码

$("table tbody").sortable({
    handle: 'button'
    //handle: 'img'
}).disableSelection();

活小提琴

现在的问题是当使用它img作为句柄它的工作正常

但是当使用它button作为句柄时它不起作用

我为我的问题检查了很多jquery ui可排序的问题,但没有帮助

任何人都可以解释为什么会发生这种情况

Thanx提前

我在Visual Studio 2008中使用C#,我已经安装了WPF Toolkit.我在testtest.xaml中创建了一个DataGrid.ID和Parts $列可以通过单击其相应的列标题对DataGrid进行排序.但是,列标题完成日期没有该功能.我使用标记"DataGridTemplateColumn"来格式化此列的日期.如何编写列标题完成日期,以便您可以单击"完成日期"列标题并对该列进行排序.如果单击该列,则不仅不会显示箭头,而且列标题不是"可单击的".谢谢

    <Label Height="22" HorizontalAlignment="Left" Margin="10,45,0,0" Name="label1" VerticalAlignment="Top" Width="41">Task</Label>
    <my:DataGrid ItemsSource="{Binding}" AutoGenerateColumns="False" Margin="140,83,67,28" Name="dataGrid1" GridLinesVisibility="Vertical" IsReadOnly="True">
        <my:DataGrid.Columns>
            <my:DataGridTextColumn    Binding="{Binding Path=[ID]}" Header="ID" />
            <my:DataGridTextColumn Binding="{Binding Path=p}" Header="Parts $" />
            <my:DataGridTemplateColumn  SortMemberPath="" Header="Complete Date">
                <my:DataGridTemplateColumn.CellTemplate >
                    <DataTemplate>
                        <TextBlock>
                            <TextBlock.Text>
                                <Binding Path="CompleteDate" ConverterCulture="en-GB" StringFormat="{}{0:MM/dd/yyyy}"/>
                            </TextBlock.Text>
                        </TextBlock>
                    </DataTemplate>
                </my:DataGridTemplateColumn.CellTemplate>
            </my:DataGridTemplateColumn>
        </my:DataGrid.Columns>
    </my:DataGrid>
</Grid>

有谁知道如何组合jQuery UI可选择和可排序？此脚本:http://nicolas.rudas.info/jquery/selectables_sortables/在Chrome中不起作用,它也有插件修改.

我正在尝试开发一个具有以下功能的小页面:

1. 页面将有两个div:一个是#origin,包含很多缩略图,第二个是#drop,可以放下图像(最多只有3个).
2. 需要可以将图像从#drop拖放回原点.
3. #drop需要是可排序的,因为3个所选图像的顺序很重要.
4. 当放在#drop上时,图像应该对齐,就好像它们从一开始就显示原始图像一样.

我之前从未使用过jQuery,之前我甚至有一个工作页面原型,我已经通过本机HTML5拖放事件在两个容器之间进行了拖放,但是当我将sortable()jquery功能添加到#drop时,图像无法再被拖回#origin,这会破坏我的功能.

所以,我重新开始并希望实现拖放功能以及使用jQuery进行排序.我已经阅读了所有可拖动,可放置和可排序功能的完整API,但是我无法让它工作.不确定这是我用于每个功能的设置.

在小提琴上,您可以看到图像变得可拖动,我可以看到我指定的设置(不透明度,光标),但图像不能放在#drop上.

根据我的理解,使图像可拖动,图像具有"可拖动"类,以及使用".draggable"接受#drop droppable的组合,它应该允许最基本的功能,但即使这样也不会采取.另外我读到如果draggable和droppable都具有相同的"范围"设置,它也应该工作,但事实并非如此.

这是页面代码的简单版本,加上jsFiddle:http://jsfiddle.net/39khs/

码:

CSS:

#origin {
  background-color: green;
}
#drop {
  background-color: red;
  min-height: 120px;
}

JS:

$("img").draggable({ helper: "clone", opacity: 0.5, cursor: "crosshair", scope: "drop" });
$("#drop").droppable({ accept: ".draggable", scope: "drop"});
$("#drop").sortable();

HTML:

<div id="wrapper">
    <div id="origin" class="fbox">
        <img src="http://placehold.it/140x100" id="one" title="one" class="draggable" />
        <img src="http://placehold.it/140x100" id="two" title="two" class="draggable" />
        <img src="http://placehold.it/140x100" id="three" title="three" class="draggable" />
    </div>
  <p>test</p>
    <div id="drop" class="fbox">

    </div>
</div>

任何帮助是极大的赞赏.