Как перемещать элементы li из одного списка в другой

Здесь я перемещаю все элементы li из одного списка в другой список. Что мне нужно - это выбрать конкретный элемент li из одного списка, а при нажатии кнопки он должен перейти на другой список. Вот мой кодКак перемещать элементы li из одного списка в другой

$(document).ready(function() { 
    $("#add").click(function() { 
     $("#list1 li").appendTo('#list2'); 
    }); 
});

<div> 
    <asp:ListView ID="ListView1" runat="server"> 
     <LayoutTemplate> 
      <ul id="list1" class="connectedSortable"> 
       <asp:PlaceHolder runat="server" id="itemPlaceholder"></asp:PlaceHolder> 
      </ul> 
     </LayoutTemplate> 
     <ItemTemplate>  
      <li class="ui-state-default" ><%# Eval("value") %></li>  
     </ItemTemplate> 
    </asp:ListView> 

    <asp:ListView ID="ListView2" runat="server"> 
     <LayoutTemplate> 
      <ul id="list2" class="connectedSortable"> 
       <asp:PlaceHolder runat="server" id="itemPlaceholder"></asp:PlaceHolder> 
      </ul> 
     </LayoutTemplate> 
     <ItemTemplate>  
      <li class="ui-state-highlight" ><%# Eval("value2") %></li>  
     </ItemTemplate> 
    </asp:ListView> 
    <input id="add" name="add" type="button" value="add" /><br /> 
</div>

Любое предложение?

источник

2012-03-19 bala3569

В чем проблема? – SpaceBison

, в чем проблема с этим кодом? вы получаете какую-либо ошибку. и лучше предоставить HTML-разметку, поскольку это будет вопрос jQuery. – Shyju

Любой шанс, что вы можете просто добавить простой HTML-код, а не код сервера, и, возможно, пример на jsfiddle.net. Приветствия. – Deadlykipper

Звучит как работа для last().

$(document).ready(function() { 
    $("#add").click(function() { 
     $("#list1 li").last().appendTo('#list2'); 
    }); 
});

EDIT: Для того, чтобы переместить конкретный пункт:

$("#list1 li").click(function() { 
    $(this).appendTo('#list2'); 
});

ДОПОЛНИТЕЛЬНЫЕ EDIT: Для того, чтобы сделать элемент списка кликабельным, а затем добавить этот пункт, когда кнопка Add нажата (не проверено).

$("#list1 li").click(function() { 
    $("list1 li.clicked").removeClass("clicked"); 
    $(this).addClass("clicked"); 
}); 
$("#add").click(function() { 
    $("#list1 li.clicked").removeClass("clicked").appendTo('#list2'); 
});

источник

2012-03-19 13:45:42 Dave

, но я могу выполнить перетаскивание из определенного элемента li из одного списка и переместить его в другой список, используя этот кусок кода $ (function() {$ ("# list1, # list2"). Sortable ({connectWith: ".connectedSortable"}). disableSelection();}); – bala3569

Как я могу выбрать конкретный элемент li, используя этот кусок кода – bala3569

Перетаскивание - это более сложная вещь, но там должно быть много плагинов jQuery, где вы можете google. – Dave

Попробуйте это: http://jsfiddle.net/jKvZB/2/

list 1: 
<ul id="list1"> 
    <li>hello</li> 
    <li>world</li> 
</ul> 
<br /> 
list 2: 
<ul id="list2"> 
    <li>goodbye</li> 
</ul> 

<a href="#" id="listSwap">go</a> 


$(document).ready(function() { 
    $("#listSwap").click(function() { 
     $("#list1 li:nth-child(2)").hide(); 
     $("#list2").append("<li>"+$("#list1 li:nth-child(2)").html()+"</li>"); 
    }); 
});

Это довольно простой, но я уверен, что вы можете работать его оттуда.

источник

2012-03-19 13:39:13 Deadlykipper

если вы просто переместить элемент петь Li, вы должны иметь уникальный атрибут для каждого элемента Li, а затем использовать функцию селектора JQuery, чтобы выбрать один и добавить к другому элементу.

это может быть, может помочь вам:

<ul id="list1"> 
    <li class="ui-state-default 01"> list1-1</li> 
    <li class="ui-state-default 02"> list1-2</li> 
    <li class="ui-state-default 03"> list1-3</li> 
</ul> 
<ul id="list2"></ul> 

    $("#list1 .01").appendTo($("#list2")); 
    or 
    $("#list1 li:last").appendTo($("#list2"));

похож на ответ на Дэйва.

источник

2012-03-19 13:48:45 zhengchun

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".add").click(function() { 
      $(this).appendTo('#list2'); 
     }); 
    }); 
</script>

Это сделает так, чтобы любой конкретный элемент li был нажат, это тот, который будет перемещен. Просто убедитесь, что у li есть класс «add»

источник

2012-03-19 14:02:43

Как перемещать элементы li из одного списка в другой

ответ

Смежные вопросы