Angular Click/Drag to multi select - how to prevent not allowed cursor

How can I prevent the not-allowed cursor when click/dragging the items?

What I want is to allow the user to click (mouse down) a checkbox and drag over several others and then mouse up to select multiple checkboxes. Sometimes this works, but sometimes I get the not allowed cursor (see image below, you'll see the ghost of items 0-4 but I can't screencap the "not allowed" cursor that goes with it)

How can I disable the dragging of items with the ghost image and not allowed cursor?

CodePen of Multi-Select Checkboxes

I've tried this, but it isn't working properly for me:

  $document.bind('dragenter', function(e) {
    e.preventDefault();
  });

What I've found is that, when I get into a state where the not-allowed cursor and ghost items are being dragged, I check then uncheck a single item, then I can click/drag to select multiple items.

Edit 1:

Something I tried earlier, but is now working...

$event.preventDefault();

If I put this on the ng-mousedown event, it is working (hmmm - see Edit 2)!

Edit 2:

Hmmm. The addition of the preventDefault now prevents the scrollbar in the surrounding div from moving when dragging beyond the visible items in the list. I need to be able to drag and scroll, but don't want the not-allowed/ghosting. Any help? Note: CodePen updated to show this working/not working behavior.