2011-04-26 36 views
6

Tôi đang cố gắng sử dụng jQuery có thể sắp xếp, có thể phân đoạn và có thể kéo để làm việc cùng nhau. Tôi có 3 danh sách: một trình giữ chỗ cho điểm ngắt; báo cáo hàng; nhóm báo cáo.Nhận jQuery có thể sắp xếp, có thể phân tách và có thể kéo để làm việc cùng nhau

Người dùng sẽ có thể:

  1. Kéo như nhiều bản giữ chỗ vào danh sách 'dòng báo cáo'
  2. Kéo một-at-a-thời gian một 'nhóm báo cáo' duy nhất (không phải là bản sao) vào bộ sưu tập 'báo cáo hàng' (nhưng không phải là câu thơ) ... cho đến khi không còn nhóm báo cáo nào nữa.
  3. Người dùng có thể sắp xếp báo cáo danh sách hàng quảng cáo nauseum.

Vấn đề của tôi là ...
tôi không thể nhận Số 2 nêu trên để làm việc

Side Lưu ý:
Tôi thực sự đã cố gắng tạo ra một jsFiddle cho điều này nhưng anh ta lại jsFiddle để giải quyết các tệp UI của jQuery ... vì vậy tôi phải bao gồm trang ENTIRE HTML cho bạn ở đây .... xin lỗi!

Dưới đây là HTML:

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title>DragDrop Sample</title> 

    <link href="Includes/Css/jquery.ui.all.css" rel="stylesheet" type="text/css" /> 

    <script src="Includes/JavaScript/jQuery/Core/jquery-1.4.4.js" type="text/javascript"></script> 
    <script src="Includes/JavaScript/jQuery/ThirdPartyPlugIns/jquery.ui.core.js" type="text/javascript"></script> 
    <script src="Includes/JavaScript/jQuery/ThirdPartyPlugIns/jquery.ui.widget.js" type="text/javascript"></script> 
    <script src="Includes/JavaScript/jQuery/ThirdPartyPlugIns/jquery.ui.mouse.js" type="text/javascript"></script> 
    <script src="Includes/JavaScript/jQuery/ThirdPartyPlugIns/jquery.ui.draggable.js" type="text/javascript"></script> 
    <script src="Includes/JavaScript/jQuery/ThirdPartyPlugIns/jquery.ui.droppable.js" type="text/javascript"></script> 
    <script src="Includes/JavaScript/jQuery/ThirdPartyPlugIns/jquery.ui.sortable.js" type="text/javascript"></script> 

    <style type="text/css"> 
    body 
    { 
     font-family: Arial; 
     font-size: 18px; 
    } 
    #myDiv 
    { 
     width: 500px; 
    } 
    .item 
    { 
     background-color: #DDDDDD; 
     border: solid 1px #777777; 
     margin: 2px; 
     width: 300px; 
    } 
    .breakPoint 
    { 
     background-color: #999966; 
    } 
    .placeHolder 
    { 
    } 
    .reportRow 
    { 
    } 
    .reportGroup 
    { 
    } 
    </style> 

    <script type="text/javascript"> 
    $(document).ready(function() { 

     $("#divReportRows").sortable({ 
     }); 

     $("#divReportRows").droppable({ 
      accept: '.breakPoint, .reportGroup', 
      drop: function(event, ui) { 

       var item = $(ui.draggable); 

       if (item.hasClass('reportRow')) 
        return; 

       if (item.hasClass('placeHolder')) 
        item.removeClass("placeHolder"); 

       if (item.hasClass('reportGroup')) 
        item.removeClass("reportGroup"); 

       item.addClass("reportRow"); 

       $(this).append(item.clone()); 
      } 
     }); 

     $("#divBreakPoint").draggable({ 
      helper: 'clone' 
     }); 

     $("#divReportGrouping div.item").draggable({ 
      helper: 'clone' 
     }); 
    }); 
    </script> 

</head> 
<body> 
    <table> 
     <thead> 
      <tr> 
       <td colspan="4" style="color: #660000;"> 
        The purpose here is to be able to:<br /> 
        <ul> 
         <li>Drag cloned-copies of 'break-point' placeholders into the 'report rows' collection.</li> 
         <li>Drag a single entire 'report group' (not a clone) into the 'report rows' collection.</li> 
         <li>Once dragged, the user can re-sort 'report rows' to their hearts content.</li> 
        </ul> 
       </td> 
      </tr> 
      <tr> 
       <td> 
       </td> 
       <td> 
       </td> 
       <td> 
        Report Rows 
       </td> 
       <td> 
        Report Groupings 
       </td> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td valign="top"> 
        <div id="divBreakPoint" class="item breakPoint placeHolder"> 
         <input type="hidden" name="ctl00$ContentPlaceHolder1$hidReportKey" id="ctl00_ContentPlaceHolder1_hidReportKey" /> 
         <input type="hidden" name="ctl00$ContentPlaceHolder1$hidProjectKey" id="ctl00_ContentPlaceHolder1_hidProjectKey" /> 
         <input type="hidden" name="ctl00$ContentPlaceHolder1$hidAsOf" id="ctl00_ContentPlaceHolder1_hidAsOf" /> 
         <span id="ctl00_ContentPlaceHolder1_lblName">BreakPoint</span> 
        </div> 
       </td> 
       <td> 
       </td> 
       <td valign="top"> 
        <div id="divReportRows"> 
          <div class="item reportRow reportRow"> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl00$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl00_hidReportKey" value="306" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl00$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl00_hidProjectKey" value="869" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl00$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportRows_ctl00_hidAsOf" value="4/26/2011 12:51:04 PM" /> 
           <span id="ctl00_ContentPlaceHolder1_repReportRows_ctl00_lblName">DETAILED ENGINEERING</span> 
          </div> 
          <div class="item reportRow reportRow"> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl01$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl01_hidReportKey" value="306" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl01$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl01_hidProjectKey" value="869" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl01$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportRows_ctl01_hidAsOf" value="4/26/2011 12:51:04 PM" /> 
           <span id="ctl00_ContentPlaceHolder1_repReportRows_ctl01_lblName">OWNER FURNISHED MATERIALS</span> 
          </div> 
          <div class="item reportRow reportRow"> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl02$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl02_hidReportKey" value="306" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl02$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl02_hidProjectKey" value="869" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl02$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportRows_ctl02_hidAsOf" value="4/26/2011 12:51:04 PM" /> 
           <span id="ctl00_ContentPlaceHolder1_repReportRows_ctl02_lblName">FIELD CONSTRUCTION</span> 
          </div> 
          <div class="item breakPoint reportRow"> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl03$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl03_hidReportKey" value="306" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl03$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl03_hidProjectKey" value="869" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl03$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportRows_ctl03_hidAsOf" value="4/26/2011 12:51:04 PM" /> 
           <span id="ctl00_ContentPlaceHolder1_repReportRows_ctl03_lblName">BreakPoint</span> 
          </div> 
          <div class="item reportRow reportRow"> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl04$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl04_hidReportKey" value="306" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl04$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl04_hidProjectKey" value="869" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl04$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportRows_ctl04_hidAsOf" value="4/26/2011 12:51:04 PM" /> 
           <span id="ctl00_ContentPlaceHolder1_repReportRows_ctl04_lblName">PENDING CHANGES</span> 
          </div> 

          <div class="item breakPoint reportRow"> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl05$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl05_hidReportKey" value="306" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl05$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl05_hidProjectKey" value="869" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl05$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportRows_ctl05_hidAsOf" value="4/26/2011 12:51:04 PM" /> 
           <span id="ctl00_ContentPlaceHolder1_repReportRows_ctl05_lblName">BreakPoint</span> 
          </div> 
          <div class="item reportRow reportRow"> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl06$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl06_hidReportKey" value="306" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl06$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl06_hidProjectKey" value="869" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl06$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportRows_ctl06_hidAsOf" value="4/26/2011 12:51:04 PM" /> 
           <span id="ctl00_ContentPlaceHolder1_repReportRows_ctl06_lblName">CONTINGENCY</span> 
          </div> 
          <div class="item breakPoint reportRow"> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl07$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl07_hidReportKey" value="306" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl07$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportRows_ctl07_hidProjectKey" value="869" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportRows$ctl07$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportRows_ctl07_hidAsOf" value="4/26/2011 12:51:04 PM" /> 
           <span id="ctl00_ContentPlaceHolder1_repReportRows_ctl07_lblName">BreakPoint</span> 
          </div> 
        </div> 
       </td> 
       <td valign="top"> 
        <div id="divReportGrouping"> 
          <div class="item reportGroup"> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl00$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl00_hidReportKey" value="306" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl00$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl00_hidProjectKey" value="869" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl00$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl00_hidAsOf" value="4/26/2011 12:51:04 PM" /> 
           <span id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl00_lblName">CONSTRUCTION MANAGEMENT</span> 
          </div> 
          <div class="item reportGroup"> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl01$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl01_hidReportKey" value="306" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl01$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl01_hidProjectKey" value="869" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl01$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl01_hidAsOf" value="4/26/2011 12:51:04 PM" /> 
           <span id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl01_lblName">CONTINGENCY</span> 
          </div> 
          <div class="item reportGroup"> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl02$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl02_hidReportKey" value="306" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl02$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl02_hidProjectKey" value="869" /> 

           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl02$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl02_hidAsOf" value="4/26/2011 12:51:04 PM" /> 
           <span id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl02_lblName">DETAILED ENGINEERING</span> 
          </div> 
          <div class="item reportGroup"> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl03$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl03_hidReportKey" value="306" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl03$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl03_hidProjectKey" value="869" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl03$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl03_hidAsOf" value="4/26/2011 12:51:04 PM" /> 
           <span id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl03_lblName">FEL</span> 
          </div> 
          <div class="item reportGroup"> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl04$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl04_hidReportKey" value="306" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl04$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl04_hidProjectKey" value="869" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl04$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl04_hidAsOf" value="4/26/2011 12:51:04 PM" /> 
           <span id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl04_lblName">FIELD CONSTRUCTION</span> 
          </div> 
          <div class="item reportGroup"> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl05$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl05_hidReportKey" value="306" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl05$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl05_hidProjectKey" value="869" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl05$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl05_hidAsOf" value="4/26/2011 12:51:04 PM" /> 
           <span id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl05_lblName">LUMP SUM CONTRACTS</span> 
          </div>       
          <div class="item reportGroup"> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl06$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl06_hidReportKey" value="306" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl06$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl06_hidProjectKey" value="869" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl06$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl06_hidAsOf" value="4/26/2011 12:51:04 PM" /> 
           <span id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl06_lblName">NRE</span> 
          </div> 
          <div class="item reportGroup"> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl07$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl07_hidReportKey" value="306" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl07$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl07_hidProjectKey" value="869" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl07$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl07_hidAsOf" value="4/26/2011 12:51:04 PM" /> 
           <span id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl07_lblName">OWNER FURNISHED MATERIALS</span> 
          </div> 
          <div class="item reportGroup"> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl08$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl08_hidReportKey" value="306" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl08$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl08_hidProjectKey" value="869" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl08$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl08_hidAsOf" value="4/26/2011 12:51:04 PM" /> 
           <span id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl08_lblName">PENDING CHANGES</span> 
          </div> 
          <div class="item reportGroup"> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl09$hidReportKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl09_hidReportKey" value="306" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl09$hidProjectKey" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl09_hidProjectKey" value="869" /> 
           <input type="hidden" name="ctl00$ContentPlaceHolder1$repReportGrouping$ctl09$hidAsOf" id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl09_hidAsOf" value="4/26/2011 12:51:04 PM" /> 
           <span id="ctl00_ContentPlaceHolder1_repReportGrouping_ctl09_lblName">SCSA</span> 
          </div> 
        </div> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</body> 
</html> 

Trả lời

2

Vấn đề của bạn cho # 2 là dành cho $("#divReportGrouping div.item") các helper nên được đặt thành 'original' thay vì clone, và trên drop một trong đó là nối vào #divReportRows là mục và không phải bản sao. Đây là mẫu đang hoạt động: http://jsfiddle.net/3zpV6/2/

+0

Cảm ơn sự giúp đỡ. Vấn đề với giải pháp này mặc dù là khi 'ban đầu' được sử dụng mục ReportGroup bay đến phía đối diện của màn hình cho đến khi bạn thực sự thả nó ... đó là trực quan không mong muốn. Bạn có biết cách khắc phục điều đó không? –

+0

Xin chào, bạn có thể thêm tùy chọn 'hoàn nguyên' vào $ ("# divReportGrouping"). Draggable() được đặt thành 'không hợp lệ' và thêm trình xử lý trên stop() như sau: stop: function (event, ui) { ui.helper.css ('vị trí', 'tương đối'); } – Xnake

+0

Tôi đã thử dừng: chức năng và nó không hoạt động. Có cách nào khác không? –

3

Đây là giải pháp làm việc mà tôi đã đưa ra các kéo/giảm/sắp xếp đó. Hy vọng nó sẽ giúp ai đó.

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
    <script src="Scripts/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script> 

    <style type="text/css"> 
     #DraggableList { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; border: 1px; border-style:solid; } 
     #DroppableList { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; border: 1px; border-style:solid; } 
    </style> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#DraggableList li").draggable({ 
       revert: 'invalid' 
      }); 
      $("#DroppableList").sortable(); 

      $("#DroppableList").droppable({ 
       drop: function (event, ui) { 
       // If test in place to ignore the sortable instance of the droppable function 
        if ($(ui.draggable).hasClass("ui-draggable-dragging")) { 
         var itemText = $(ui.draggable).text(); 
         $(ui.draggable).empty(); 
         $('#DroppableList').append($('<li>').text(itemText).addClass("dropped")); 
        } 
       } 
      }); 

      $('#DroppableList li').live('dblclick', function (evt) { 
       evt.preventDefault(); 
       $(this).remove(); 
      }); 
     }); 
    </script> 


    </head> 
    <body> 
     <form id="form1" runat="server"> 
      <div id="ListDiv"> 
       <ul id="DraggableList"> 
        <li>Linebacker</li> 
        <li>Tackle</li> 
        <li>Safety</li> 
        <li>Cornerback</li> 
        <li>Guard</li> 
        <li>End</li> 
       </ul> 
      </div> 
      <div> 
       <ul id="DroppableList"> 
       </ul> 
      </div> 
     </form> 
    </body> 
    </html> 
Các vấn đề liên quan