在表格內選擇一個班級進行拖動

Question

我有一張桌子。在裏面我有一個叫做阻力的課。我需要拖動那個類。我應該如何拖動它？

//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> 

Answer 1

把它變成一個http://jsfiddle.net/ABt8h/我什麼都看不到你的代碼錯誤後..

我是你的代碼中做一些更多的調試。也許你在js中有重疊選擇器？

Answer 2

我使用ajax控件加載並動態地爲div創建id。所以它不起作用。 ，因爲在JavaScript加載後ajax控件會加載。

$.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; } 
     } 
    } 
}