components moving when margin is set to a high value compared to columns

[ananthongit]

Hi, I have a gridster config as follows..

  $scope.gridsterOptions = {
    columns: 40,
    floating: false,
    margins:[30,30]
  };

  $timeout(function() {
    $scope.items = [

      {
        col: 0,
        row: 2,
        sizeX: 20,
        sizeY: 20,
        content: "Item C (col: 0, row: 2)"
      },

      {
        col: 2,
        row: 0,
        sizeX: 20,
        sizeY: 20,
        content: "Item B (col: 2, row: 0)"
      },

      {
        col: 0,
        row: 0,
        sizeX: 20,
        sizeY: 20,
        content: "Item A (col: 0, row: 0)"
      }

    ];

When I click on a component, it moves.. I want to prevent the same. I want it to be moved only when it is dragged. How can I prevent this(The plunker for the issue can be found at http://plnkr.co/edit/nd2L29fBEm4ti5QLeA76?p=preview).

[axar]

When there is no explicit grid drag handle is specified. It used the entire component as a drag handle. Try specifying a drag handle class.

[ananthongit]

Hi.. I tried your suggestion in this plunker: http://plnkr.co/edit/dBfVPXnKYxwQpLZKBkDK?p=preview It is working. But, now I can't drag the component by clicking it anywhere from the body of the component(I can drag only by clicking on the drag handle(title in this case)).

Actually, by putting a break point in the angular gridster code, I observed that, when I click on the component(drag handle to be precise) , a dragStart(e) method is called which is causing this problem. I want to know if there is a way to prevent the component dragging when it is clicked(anywhere in the component body). Also, the component should be draggable when I actually drag it.