Question

I have a table. Inside it I have a class called drag. I need to drag that class. How should I drag it?

//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
  }
});

Here is my table below. How should I drag the table?

<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

After putting it into a http://jsfiddle.net/ABt8h/ i can’t see anything wrong with your code..

I was do some more debugging within your own code. Maybe you have an over lapping selector in your js?