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 - 必填項目和可選項目

回答

相關問題