jQuery上下排序列表項不是拖放式的

我想要一個用戶能夠重新排列單擊事件上的列表。我已經在這裏建立了一個非常基本的jsfiddle：所以在這個例子jQuery上下排序列表項不是拖放式的

http://jsfiddle.net/8vWXZ/2/

我想點擊的李項目及其內容移動到的位置在上面的DOM。我想嚴格地說，它正在被列入李項目索引中。

這將在稍後擴展以包含上下移動li項目的按鈕和保存列表項目的順序/狀態的提交按鈕。

我發現了很多關於拖放的信息（這不是必需的），但在這類功能上並不多。如果有人能在正確的方向指向我，將是巨大的，你可能想看看:)

來源

2010-08-16 RyanP13

「不要求」 - 你的意思是「不需要」或「禁止」？拖放非常直觀，也適用於可觸摸設備（我希望 - 我沒有嘗試過）。 – MvanGeest 2010-08-16 22:20:59

對不起，我的意思是拖放功能在這裏不是必需的。我認爲這將是理想的並增加價值，但客戶希望它通過可上下移動項目的可點擊鏈接運行。 – RyanP13 2010-08-16 22:23:17

東西是jQuery UI sortable

如果你只是想通過點擊等移動條目有一個看看以下方法：

detach功能

DOM insertion功能

$("document").ready(function() { 
    $("#reOrder li").click(function() { 
     var index = $("#reOrder li").index(this); 
     if (index != 0) { 
      // li item is not sitting in the first position 
      $("#reOrder li:eq(" + (index - 1) + ")").before(this); 
     } 
    }); 
});

Detach將允許您從DOM中刪除單擊的元素並將有可用的副本，然後可以使用其中一種DOM插入函數重新插入所需的位置。

來源

2010-08-16 22:26:34 going

太好了。現在已經更新了它，但想要解除第一個li上的click事件，以便在單擊第一個項目時阻止它們被刪除。 – RyanP13 2010-08-16 22:44:02

Hi Ryan，看看示例函數（上面），它檢查索引0處的項目，以確保它不會嘗試在該項目之前調用（）。 – going 2010-08-16 22:46:20

更新地址： http://jsfiddle.net/8vWXZ/6/ 謝謝。 – RyanP13 2010-08-16 22:48:19

$(function() { 
    var $ul = $('ul'); 
    $ul.css({ position: 'relative', height: $ul.height(), width: $ul.width() }); 

    $ul.find('>*').each(function(i, e) { 
    var $e = $(e); 
    $e.data($e.position()); 
    }).each(function(i, e) { 
    var $e = $(e); 
    $e.css({ position: 'absolute', top: $e.data('top'), left: $e.data('left') }); 
    }).click(function(e) { 
    var $e = $(e.target); 
    var $be = $e.prev(); 
    if (!$be.length) return; 
    $be.before($e).stop().animate($e.position()); 
    $e.stop().animate($be.position()); 
    }); 
});

http://jsbin.com/eduhaf/4/edit

來源

2012-10-02 06:27:58 abrkn

jQuery上下排序列表項不是拖放式的

回答

相關問題