html5 drag and drop танец в дропзоне

Question

Я занимаюсь перетаскиванием html, при этом я столкнулся с одной проблемой: пользовательский интерфейс - это танец.Мой код прост при наведении указателя мыши на перетаскивание. Я добавляю один дополнительный пунктирный div, при наведении курсора удаляю div.При добавлении после добавления не возникает никаких проблем, но перед добавлением пользовательский интерфейс танцует. Я не должен использовать jquery UI.

Я обнаружил проблему, при создании дополнительного div, перемещение при наведении курсора, создание дополнительного div и удаление зацикливания.

Может ли кто-нибудь дать какую-нибудь идею?

elem.addEventListener('dragover', this.handledragEnter.bind(this), false);
            elem.addEventListener('dragleave', this.handleddragleave.bind(this), false);

handledragEnter:function(e){
            if($('#dropZone').length == 0){
                //if($(e.srcElement).is(':last-child')){
                    if($(e.srcElement).hasClass('assignedListItem')){
                        $(e.srcElement).before('<div id="dropZone" style="border:1px solid red;width:100px;border-style: dotted;height:30px;"></div>');
                    }
                    else{
                        $(e.srcElement).closest('.assignedListItem').before('<div id="dropZone" style="border:1px solid red;width:100px;border-style: dotted;height:30px;"></div>');
                    }
                    if($("#dropZone").next().hasClass( "styleDragBorder" )){
                        $("#dropZone").next().hide();
                    }
               // }

            }


        },

handleddragleave:function(e){
            $("#dropZone").next().show();
            if($('#dropZone').length == 1){
                $('#dropZone').remove();
            }

        },

Answer 1

Я не смог решить эту проблему, поэтому я использовал html5Sortable .Это легко использовать и решить проблему танца, и это требует только jquery.не JQuery UI.