jquery event element

Question

I have this code:

    $(".testing").sortable({
        helper: fixHelper,
        containment:$("testing").parent(),
        start:function(){
            if($(event.target).hasClass("test")){
                alert("hello");
            }
            if($(this).hasClass("test")){
                alert("hello");
            }
        }
}); 

I am trying to make a table sortable. However the first table row and the last table row I do not want to be sortable. So I was thinking was to just cancel the event if it was the first row or the last row. However, when I alert the event.target it is telling me that it is the element that is set to the sortable container. How can I actually get the element that was sent to the event. Also does any one know how to cancel the event? is it just return false or event.preventDefault() ?

Answer 1

Make your life easier. Use header and footer elements:

<table>
<thead>
  <tr>...</tr>
</thead>
<tfoot>
  <tr>...</tr>
</tfoot>
<tbody>
  <tr>...</tr>
  <tr>...</tr>
  <tr>...</tr>
  ...
</tbody>
</table>

Yes they should appear in that order (footer before body). And then you can just sort to body leaving the header and footer in place. This will probably be sufficient:

$(".testing > tbody").sortable({...});

Answer 2

You can access a widgets elements with the second argument of the callback.

start: function (event, ui){
  var helper=$(ui.helper);
}

http://jqueryui.com/demos/sortable/#overview

In response to your comment:

Are you saying you want some of the elements in the list to not be draggable?

You should this preference in the options

$('someElement').sortable({
  items: '.test',
  //other sortable options
});

Answer 3

It would be easier to use the option to select the sortable items.

$('.testing').sortable({
    items: 'tr:not(:last, :first)'
});

The above says, "sort all tr's except the first and last"

In jQuery you can cancel an Event handler by returning false.

$(".testing").sortable({
    helper: fixHelper,
    containment:$("testing").parent(),
    start:function(){

        if($(event.target).hasClass("test") || $(this).hasClass('test')){
            alert("hello");
            return false;
        }
    }

});