드래그를 위해 테이블 ​​안의 클래스를 선택하십시오.

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

저는 div의 ID를로드하고 동적으로 생성하기 위해 아약스 컨트롤을 사용합니다. 그래서 그것은 작동하지 않습니다. 자바 스크립트가로드 된 후 ajax contol이로드되기 때문입니다.

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