0

私はテーブルを持っています。その中にはドラッグというクラスがあります。そのクラスをドラッグする必要があります。どのようにドラッグすればよいですか?

//Counter
counter = 0;
//Make element draggable
$('.drag').draggable({
  revert: 'invalid',
  helper: 'clone',
  containment: 'frame',
  cursorAt: { left: -1, top: -1 },
  //When first dragged
  stop: function (ev, ui) {
    //code here
  }
});

これが私の表です。テーブルをドラッグするにはどうすればよいですか?

<div class="options">
  <div>
    <table id="gvEventDetails" cellspacing="0" border="1"
      style="border-collapse:collapse;" rules="all">
      <tbody>
        <tr><th scope="col">EventID</th></tr>
        <tr>
          <td>
            <div id="drag0" class="drag"
              style="background-color:RGB(30,140,70)" height:32px;=""
              width:32px;="" position:absolute;="">Event1
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div id="drag1" class="drag"
              style="background-color:RGB(40,30,255)" height:32px;=""
              width:32px;="" position:absolute;="">Event2
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
4

2 に答える 2

0

私はajaxコントロールを使用して、divのIDをロードして動的に作成します。だからそれは動作しません。これは、javascriptが読み込まれた後にajaxcontolが読み込まれるためです。

 $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "Eventcalander.aspx/BindDatatable",
                data: "{}",
                dataType: "json",
                success: function (data) {
                    for (var i = 0; i < data.d.length; i++) {

  $("#gvEventDetails").append("<tr><td><div width:32px; height:32px; id= drag" + i + " class=\"dragg\" style= background-color:" + data.d[i].Color + ">" + data.d[i].EventID + "</div></td></tr>");

                    }
                },
                error: function (result) {
                    alert("Error");
                }

            });

コードbehideで私はこのように使用しました

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;

namespace DragDropDynamically
{
    public partial class Eventcalander : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindColumnToGridview();
            }

        }

        /// <summary>
        /// This method is used to bind dummy row to gridview to bind data using JQuery
        /// </summary>
        private void BindColumnToGridview()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("EventID");
            dt.Rows.Add();
            gvEventDetails.DataSource = dt;
            gvEventDetails.DataBind();
            gvEventDetails.Rows[0].Visible = false;
        }

        [WebMethod]
        public static EventDetails[] BindDatatable()
        {
            DataTable dt = new DataTable();
            List<EventDetails> lstEventdetails = new List<EventDetails>();

            using (SqlConnection con = new SqlConnection("Server=CTSINDLFVMOSS;Database=databasename;uid=userid;pwd=password"))
            {
                using (SqlCommand cmd = new SqlCommand("SELECT TOP 1000 [EventID],[EventStartDate],[EventEndDate],[EventPeriod],[Feature],[Display],[FeatureandDisplay],[TPR],[Color] FROM [DB_CGTPO_DEVE].[dbo].[HistoryEvent]", con))
                {
                    con.Open();
                    SqlDataAdapter da = new SqlDataAdapter(cmd);
                    da.Fill(dt);
                    foreach (DataRow dtrow in dt.Rows)
                    {

                        eventdetails.EventID = dtrow["EventID"].ToString();

                        eventdetails.Color = dtrow["Color"].ToString().Trim();


                        lstEventdetails.Add(eventdetails);
                    }
                }
            }
            return lstEventdetails.ToArray();
        }
        public class EventDetails
        {
            public string EventID { get; set; }
            public string Color { get; set; }
        }
    }
}
于 2012-07-17T10:16:10.110 に答える
0

それをhttp://jsfiddle.net/ABt8h/に入れた後、私はあなたのコードに何も悪いことを見ることができません。

私はあなた自身のコード内でもう少しデバッグをしていました。たぶんあなたはあなたのjsにオーバーラップセレクターを持っていますか?

于 2012-07-16T15:58:17.073 に答える