On the conflict problem of JS drag and drop function and its solving method

Objective

I have written about the JS drag-and-drop article, the implementation of the method and online can be found in the same way, indistinguishable, but in an accidental test that the way the binding event may be in conflict with other drag events, resulting in the thinking of event binding. This article mainly introduces the method of solving this kind of conflict, mainly is the timing of event binding.

Source of the problem

This problem is found in the following Codepen example, adding a native input range element to a drag-and-drop page, you can see that the drag of the input range is invalid.

See the Pen drag with conflict issue by Zongbin (@nzbin) on Codepen.

Let's take a look at the drag-and-drop method code:

var function (modal, handle) {...  $ (handle). On (' MouseDown ', dragstart);  $ (document). On (' MouseMove ', dragmove);  $ (document). On (' MouseUp ', dragend);}

Almost all of the drag-and-drop cases on the Web are the methods of binding events above. Originally thought to be jQuery event binding problem, actually completely irrelevant, use native JS also encounter this kind of problem.

Looking at the drag-and-drop event bindings, it is clear that the events bound on document conflict with the drag event of input range. In fact, document as the topmost node, it should not bind other events (except the event proxy), if binding, must be temporary binding, otherwise it will cause conflict.

Workaround

Once you know where the problem is, the workaround is simple, with reference to how the JQuery UI is handled.

We can bind the document's event at the start of the drag, and then remove the document's event at the end of the drag-and-drop.

var function (modal, handle) {...   var function (e) {...    $ (document). On (' MouseMove ', DragMove)               . On (' MouseUp ', dragend);  } ...   var function (e) {    $ (document). Off(' MouseMove ')               . Off (' MouseUp '); ...  }  $ (handle). On (' MouseDown ', DragStart);  }

The input range in Codepen below has been dragged as normal.

See the Pen drag with conflict issue fixed by Zongbin (@nzbin) on Codepen.

Summarize

We can view the events of the bindings through the event Listener of the console, and remember not to pollute the global default events in your usual work. In general, the work does not encounter this situation, but if you do encounter, you need to know where the problem lies.

On the conflict problem of JS drag and drop function and its solving method