Drag & Drop с Pointer-Events для поддержки мыши и касания в Chrome - PullRequest
Новая
       15

Drag & Drop с Pointer-Events для поддержки мыши и касания в Chrome

0 голосов
/ 29 мая 2019

Я пытаюсь создать функциональность Drang & Drop на основе событий указателя для поддержки сенсорных экранов. Мой код работает нормально в Firefox (mouce & touch), в chrome он работает с мышью, но перестает работать на сенсорном экране, как только указатель покидает перетаскиваемый элемент.

Я пытался проанализировать события. Единственное, что я заметил, это то, что при выходе из перетаскиваемого элемента происходит событие «pointercancel». 

<html>
    <head>
        <style type="text/css">
            #target{
                width: 400px;
                height: 100px;
                border: 1px solid #000;
            }

            #target.over{
                background-color: #fef0f0;
            }

            #box{
                width: 50px;
                height: 50px;
                background-color: #ff0000;
            }
        </style>
        <script type="text/javascript">
            let dragDrop = {};

            dragDrop.dragDrop = function(){
                let self = this;

                this.vars = {
                    target: null,
                    box: null,
                    pointerDragMoveBind: null,
                    pointerDragEndBind: null,
                    pointerDragEnterBind: null,
                    pointerDragLeaveBind: null,
                    pointerDropBind: null
                };
            };

            dragDrop.dragDrop.prototype = {
                init: function(){
                    let self = this;

                    self.vars.target = document.getElementById("target");
                    self.vars.box = document.getElementById("box");

                    self.vars.pointerDragMoveBind = self.onPointerDragMove.bind(self);
                    self.vars.pointerDragEndBind = self.onPointerDragEnd.bind(self);
                    self.vars.pointerDragEnterBind = self.onPointerDragEnter.bind(self);
                    self.vars.pointerDragLeaveBind = self.onPointerDragLeave.bind(self);
                    self.vars.pointerDropBind = self.onPointerDrop.bind(self);

                    self.vars.box.addEventListener("pointerdown", self.onPointerDragStart.bind(self));

                    console.log(Date.now() + " Initialized");
                },

                onPointerDragStart: function(event){
                    let self = this;

                     console.log(Date.now() + " Drag Start");

                    document.addEventListener("pointermove", self.vars.pointerDragMoveBind);
                    document.addEventListener("pointerup", self.vars.pointerDragEndBind);

                    self.vars.target.addEventListener("pointerenter", self.vars.pointerDragEnterBind);
                    self.vars.target.addEventListener("pointerleave", self.vars.pointerDragLeaveBind);
                    self.vars.target.addEventListener("pointerup", self.vars.pointerDropBind);
                },

                onPointerDragMove: function(event){
                     console.log(Date.now() + " Drag Move");
                },

                onPointerDragEnter: function(event){
                    let self = this;

                     console.log(Date.now() + " Drag Enter");

                    self.vars.target.classList.add("over");
                },

                onPointerDragLeave: function(event){
                    let self = this;

                     console.log(Date.now() + " Drag Leave");

                    self.vars.target.classList.remove("over");
                },

                onPointerDrop: function(event){
                    let self = this;

                    console.log(Date.now() + " Drop");

                    self.vars.target.classList.remove("over");
                },

                onPointerDragEnd: function(event){
                    let self = this;

                    console.log(Date.now() + " Drag End");

                    document.removeEventListener("pointermove", self.vars.pointerDragMoveBind);
                    document.removeEventListener("pointerup", self.vars.pointerDragEndBind);

                    self.vars.target.removeEventListener("pointerenter", self.vars.pointerDragEnterBind);
                    self.vars.target.removeEventListener("pointerleave", self.vars.pointerDragLeaveBind);
                    self.vars.target.removeEventListener("pointerup", self.vars.pointerDropBind);
                }
            };

           window.addEventListener("load", function(){
                let ctrl= new dragDrop.dragDrop();
                ctrl.init();
            });
        </script>
    </head>
    <body>
        <div id="target"></div>
        <div id="box"></div>
    </body>
</html>

Я ожидаю, что обработка одинакова для мыши и касания. Вместо этого я не хочу использовать touch-events, поскольку они не предоставляют элементы ввода и вывода.

Кто-нибудь знает, что пошло не так?

...