Jquery Sortable - 必填项目和可选项目

我有一个包含两个列表的页面。左侧的列表中有一些“可选”项目。右侧列表是预先填入所需项目的主要列表。Jquery Sortable - 必填项目和可选项目

用户应该能够在两个列表之间来回拖动可选项目，并将它们排序在任一列表中。

用户应该能够对主要列表项目（包括必需和可选）进行排序，但不应该能够将所需项目拖动到可选列表中。

这是否有意义？达到此目的的最佳方法是什么？

我已经尝试了不同的方式来做到这一点与jquery排序，但似乎无法得到正确的。任何帮助，非常感谢。

列表示例：

<div id="Selector"> 
<ul id="OptionalFields" class='droptrue'> 
    <li class="ui-state-highlight, optional">Optional 1</li> 
    <li class="ui-state-highlight, optional">Optional 2</li> 
    <li class="ui-state-highlight, optional">Optional 3</li> 
    <li class="ui-state-highlight, optional">Optional 4</li> 
</ul> 
<ul id="FileFields" class='droptrue'> 
    <li class="ui-state-default, required">Required 1</li> 
    <li class="ui-state-default, required">Required 2</li> 
    <li class="ui-state-default, required">Required 3</li> 
</ul>

目前，我的剧本是这样的：

$(function() { 
    $("#OptionalFields").sortable({ 
     containment: '#Selector', 
     tolerance: 'pointer', 
     connectWith: '#FileFields', 
     cursor: 'pointer', 
     revert: 'true', 
     opacity: 0.6, 
     receive: function() { 
      if ($(this).hasClass("required")){ return false}; 
     } 

    }); 

    $("#FileFields").sortable({ 
     containment: '#Selector', 
     tolerance: 'pointer', 
     connectWith: '#OptionalFields', 
     cursor: 'pointer', 
     revert: 'true', 
     opacity: 0.6, 
     update: function() { 
      //alert('sorted'); 
     } 
    }); 
});

感谢，托尼

编辑的类型/语法错误。

来源

2012-01-05 Anthony Queen

好了，找到了解决办法：

$(function() { 
    $("#OptionalFields").sortable({ 
     containment: '#Selector', 
     tolerance: 'pointer', 
     connectWith: '#FileFields', 
     cursor: 'pointer', 
     revert: 'true', 
     opacity: 0.6, 
     receive: function (event, ui) { 
      if (ui.item.hasClass('required')) { 
       $(ui.sender).sortable('cancel'); 
      }; 
     } 

    }); 

    $("#FileFields").sortable({ 
     containment: '#Selector', 
     tolerance: 'pointer', 
     connectWith: '#OptionalFields', 
     cursor: 'pointer', 
     revert: 'true', 
     opacity: 0.6, 
     update: function() { 
      //alert('sorted'); 
     } 
    });

通知更改到接收事件和变化如何我取消。这将取消放置。现在让它变得漂亮。 =）

我还通过删除逗号来修复为列表项指定的类。

来源

2012-01-05 22:54:37

this是普通的JS。 hasClass()是一个jQuery函数，因此不适用于this。

试试这个（没有双关语）：$(this).hasClass('required')

演示：http://jsfiddle.net/2QMur/

来源

2012-01-05 15:02:13

我也注意到了，并修改了它。但是，它仍然不起作用。 – 2012-01-05 15:04:41

Jquery Sortable - 必填项目和可选项目

回答

相关问题