2012-08-10 86 views
1

我的web應用程序有一個功能,用戶可以在其中創建最多五個項目的列表。當創建列表時,我們會自動將其命名爲第一個項目,但用戶也可以輸入自定義名稱。所以,你有這樣的事情:jQuery UI可排序:在拖動之前和之後獲取第一個項目

Name: [ Item 1 ] (this is a text box) 

- Item 1 
- Item 2 
- Item 3 
- Item 4 
- Item 5 

我還設置了jQuery用戶界面的交互sortable以便用戶可以單擊並拖動重新排列列表中的項目。現在,我想要做的是在用戶完成拖動後第一個項目被自動重命名,但是只有在他們沒有輸入自定義名稱(可以通過比較名稱和原始的第一個項目,看看他們是否匹配)。

我知道sortable提供了許多可用於運行自定義功能的事件(如startstop)。問題是我需要在拖動發生之前和之後運行函數以進行比較,但是(據我所知)我無法在它們之間傳遞數據 - 無法使用在start中定義的變量在stop。那麼我怎麼寫這個?

+0

我認爲這更多的是物質的相信,你在回答中容忍更全局變量(事件功能之外)? :-) – 2012-08-10 15:12:52

+0

當然,無論作品如何! – daGUY 2012-08-10 15:30:23

回答

0

我通過保存的第一個項目在一個全局變量上start,然後使用該來比較當前標題上stop解決了這個。也許不是最好的方式做到這一點,但它的工作:

var saveFirstItem = function(first_item) { 
    startFirstItem = first_item; 
}; 

$(document).ready(function(){ 
    $("#list").sortable({ 
     start: function(event, ui){ 
      var first_item = $("#list li:first-child").text(); 
      saveFirstItem(first_item); 
     }, 
     stop: function(event, ui){  
      var first_item = $("#list li:first-child").text();  
      var current_title = $("#title").val(); 

      if (current_title == startFirstItem){ 
       $("#title").val(first_item); 
      } 
     } 
    }); 
}); 
0

可能不是最學術的答案,但這裏是一個想法:

爲什麼你需要啓動事件?如果我理解正確,那麼你似乎關心的是將該列表的第一項放在該字段中,但只有當該名稱不是手寫的。 你可能需要一個開始事件,如果你使這個droppable,添加第一個項目刪除名單的名字,但我想你已經有這個?

var nameIsCustom=false; 
$("#ul").sortable(
{ 
    stop: function(event,ui) 
    { 
     nameIsCustom = true; 
     $("ul > li").each(function() 
     { 
      if($("#name").val() == $(this).text()) 
      {nameIsCustom = false;} 
     }); 
     if(!nameIsCustom) 
     { 
      $("#name").val($("#ul > li:first").text()); 
     } 
    } 
}); 
相關問題