Question

I am currently messing around with some code, which will eventually be used in my final year project at uni, and i have added a table which will be filled from the database, but i would like to make the rows themselves draggable so that i can pass information around the elements on the page using it.

i have gotten the drag to work by using this code:

$(document).ready(function(){
        $(".tr_row").draggable({
              helper: function(event) {
                  return $('<div class="drag-row"><table></table></div>')
                .find('table').append($(event.target).closest('tr').clone()).end();
              },
          });
     });

and here is an example of it: http://example.faved.co.uk

the problem i am having is where it is viewed, if it is opened in chrome or safari then when you drag it, it messes around with the table look until you let go, if you open it in firefox then it works fine and doesnt do anything to the table.

my question is, why does this happen in these browsers? is there something i can do to stop it from happening, and make it work like it does when opened in firefox?

thanks

Answer 1

I found the answer to this thanks to a colleague at university,

basically if i set the position of the drag div to absolute then it worked a treat in all browsers: