Question

我是网络开发的新手，在下面的代码中，我几乎没有问题：

1）我无法找到问题，但是当我点击删除按钮（X）时，所有控件都被清除。 2）列表项旁边的文本框不可编辑，甚至readonly = false

请帮帮我，我很无聊。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css"/>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>

</head>
    <script type="text/javascript">
        var clipNums=[]
        function setTypes(clipTypes) {

            $.each(clipTypes, function (i, num) {
                clipNums.push(num);

            })
        }
        $(document).ready(function(){
            $('#target').sortable({
                update: function (event, ui) {
                }
            });


            $(function () {
                $("#target").sortable();
                $("#target").disableSelection();
            });

            $.each(clipNums, function (i, num) {
                $('#coachtypes').append("<li class='ui-state-default', id: 'clip_' " + num + ">" + num + "</li>");

            });

            $('#coachtypes li').click(function () {
                $('#target').append("<li class='coach', id: 'clip_'" + 1 + ">" + text + "<input id='Text1' type='text' /><button class='delete' style='float: right'>X</button></li>");
            });

            $('#target .delete').click(function () {
                $('#target').closest(".coach").remove();
            });
        });
        function getList()
        {            
            var text = $('#target').text();
            alert('text is ' + text);
        }      
  </script>
    <style type="text/css">



#coachtypes {  list-style-type: none;
               list-style: none; 
               border: 1px solid #000000; 
               margin: 0 ; padding: 0; width: 1081px; height: 42px;-moz-border-radius: 5px;border-radius: 5px;-webkit-border-radius: 5px;}
#coachtypes li { cursor:pointer;
                border:1px solid #dddddd;
                background:#eeeeee;
                margin:5px;
                padding:5px;
                float: left; width: 100px; height: 20px; font-size: small; text-align: center; }

#target {list-style-type: none;
               list-style: none; 
               border: 1px solid #000000; 
               margin: 0; padding: 0; width: 1081px; height: 190px;
-moz-border-radius: 5px;border-radius: 5px;-webkit-border-radius: 5px;
        }
.coach{cursor:pointer;
    border:1px solid #dddddd;
    background:#eeeeee;
    margin:5px;
    padding:5px;
    float:left;
}

.delete {background:#eeeeee; font-style: normal; font-weight: bold; color: #FF0000; font-size: x-small; position: fixed; z-index: auto;position: relative;  border:hidden}
.edit {background:#eeeeee; font-style: normal; font-weight: bold; color: #FF0000; font-size: x-small; position: fixed; z-index: auto;position: relative;  border:hidden}
        #Text1 {
            width: 23px;
            readonly:'false';

        }



    </style>

<body>
    <form id="form1" runat="server">
    <div>
        &nbsp;<br />

        <br />
<ul id="coachtypes">

</ul>

<ul id="target">


</ul>
<asp:Button ID="Button1" runat="server" Text="Button" onclientclick="getList()"/>

    </form>



</body>
</html>

How to implement drag and drop List composition UI /////////////////////aspx.cs file /////////////////////

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Compose : System.Web.UI.Page
{

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            Page.ClientScript.RegisterStartupScript(this.GetType(), "onload", "setTypes(" + "['A', 'B', 'C', 'D', 'E' ]" + ")", true);            
        }
        else
        {
            return;
        }
    }

}

单击按钮时清除html控件

0 个答案: