如何使用UI可排序发送多个隐藏值

Question

我希望使用UI可排序的Jquery逐个拖动多个值，一个框到另一个框，现在我正在使用以下代码。实际上我得到属性值并显示另一个框的值。但是我无法获得隐藏的值和不能在另一个box中显示值。所以请给出如何显示包含隐藏值也显示在另一个box.just我想如何隐藏字段值也显示在选定框中

    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<s:include value="/WEB-INF/jsp/settings/commonheader.jsp" >
<s:param name="title"><s:property value="getText('project.name')"/> | Admin | Package Master</s:param>
</s:include>
<style>
    #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
    #sortable1, #sortable3 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
    #sortable1, #sortable4 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
    #sortable1, #sortable5 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }         
    #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
    #sortable1 li, #sortable3 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
    #sortable1 li, #sortable4 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
    #sortable1 li, #sortable5 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
</style>

<div class="row">
                <div class="col-md-6">
                       <div style="padding-left: 25px;"><h3>Availble product</h3></div>
                           <div id="nontechCompetency">
                                  <ul id="availableDesignation" class="connectedSortable" style="border: 2px solid #EFEFEF; height: 200px;width: 180px;overflow: auto;">
                                      <s:iterator value="productList">
                                      <li value="<s:property value="productId"/>"><s:property value="productName"/>
                                         <input type="hidden" name="price" id="price" value="<s:property value="productAttributevo.get(0).price"/>"/>
                                      </li>
                                      </s:iterator>    
                                  </ul>
                            </div>
                </div>
            <div class="col-md-6 ">
                <div style="padding-left: 25px;"><h3>Selected product</h3></div>
                <ul id="selectedDesignation"  class="connectedSortable1" style="border: 2px solid #EFEFEF; height: 200px;width: 500px;overflow: auto;"> </ul>   
             </div>
</div>

         <script src='<%=request.getContextPath()%>/shared/test/ui/jquery.ui.core.js'></script>
         <script src='<%=request.getContextPath()%>/shared/test/ui/jquery.ui.widget.js'></script>
         <script src='<%=request.getContextPath()%>/shared/test/ui/jquery.ui.mouse.js'></script>
         <script src='/shared/test/ui/jquery.ui.sortable.js'></script>
         <script type="text/javascript">
      $(function() {
          $("#availableDesignation, #selectedDesignation" ).sortable({
                   connectWith:".connectedSortable,.connectedSortable1"
          }).disableSelection();
       });