`stopPropagation` and right-button

[xianshenglu]

1. As I saw in devtool, you delegate themousemove event on document. If some guys use the stopPropagation in the container element mousemove listener. The drag would not work. So, I proposed to expose the mousemove element and other event delegation element.

<div class="app" id="app">
  <div id="draggable">Drag This</div> 
</div>

html,body {
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}
.app {
  width:500px;
  height:500px;
  background:pink;
}
#draggable {
  width:100px;
  height:100px;
  background:lightblue;
  cursor:move; 
}

var draggableIns = new PlainDraggable(draggable);
// doesn't work with code below
app.onmousemove = function() {
  event.stopPropagation();
};

Solution:

1. event capture may solve this
2. allow user to bind mousemove on other element. for example, `#app` in this case.

2. Right click would also trigger mousedown event and cause the drag behavior. I think it is not an expected behavior.

Solution:

 1. add event.button detection

I thought of these because I was making a simple draggableJs. ...

[anseki]

Hi @xianshenglu, thank you for the report. However, in general, both two are not bug. PlainDraggable was designed for many cases as much as possible.

1. The stopping the dragging by the stopPropagation method is correct and expected behavior because you called the method to stop the mouse event for some reason.
   That is, a library has to stop doing something via an event when the event was canceled (e.g. the stopPropagation method was called).
   In other words, you should not call the stopPropagation method if the dragging should not be stopped.
2. Dragging by the right-button is needed in some cases. Therefore PlainDraggable should not control behavior by the right-button or left-button. If you want to cancel the dragging when other than left-button is pressed, you can do that by stopImmediatePropagation method.
   For example:

element.addEventListener('mousedown', function(event) {
  if (event.button !== 0) { event.stopImmediatePropagation(); }
}, false);

new PlainDraggable(element);

[xianshenglu]

Question1: That's because I want to listen the mousemove on #app. Well, it's not a big deal in this case. I am just hoping that if we can decide which element should be bound event. Question2: I thought we should only allow left button click by default and leave a switch for developer to decide whether turn on right button click or not.

[anseki]

Answer 1: The mousemove and touchmove event listeners should be added to document to make the containment option work correctly.

Answer 2: It should not control behavior with modification of mouse and touch interfaces to allow developers to do that (e.g. stopImmediatePropagation).

It was named "PlainDraggable", the "plain" means that it is simple and for general use, also, used for many cases as much as possible.