Question

我对jQuery UI Sortable有点问题，需要一些帮助：我有以下HTML代码：

<div class="sortable">
 <div class="item">
    <p>title1</p>
    <div class="sort">sort 1</div>
 </div>
   <div class="item">
    <p>title2</p>
    <div class="sort">sort 2</div>
 </div>
   <div class="item">
    <p>title3</p>
    <div class="sort">sort 3</div>
 </div> 
</div>

有一个有3个div的容器。每个都有一个标题和一个定义 - 3个定义应该是可排序的，但上面的标题应该始终保持不变。这是js：

 $(".sortable").sortable({
     items: ".sort"
 });

如果我在sortable选项中指定只对指定的项进行排序，它们会被排序，但是从我想要的div结构中取出 - 每个都在父“.item”元素中。

以下是行为的小提琴：http://jsfiddle.net/wPtjM/

有没有办法用jQuery Sortable实现我需要的东西？我看到的所有例子和尝试缺乏这样的结果。非常感谢提前！

Answer 1

正在寻找这样的东西？

var dropped;
var titleDrop;
var titleChange;
$(function() {
    $(".sortable").sortable({
        items: ".sort",
        stop: function( event, ui ) {
            if(titleDrop != titleChange)
                dropped.append(ui.item);
        },
        change: function(event, ui){
            titleChange = ui.placeholder.parent().find('p').text();
        }
    });
    $( ".item" ).droppable({
        accept: ".sort",
        drop: function( event, ui ) {
            dropped = $(this);
            titleDrop = $(this).find('p').text();
        }
    });
});

FIDDLE

<强>更新

合并切换位置：

FIDDLE2

jQuery可以从一个div分类到另一个div

1 个答案: