Ad

Html5 Drag And Drop Dropzone Dance

- 1 answer

I am doing html drag and drop,while doing it I faced one issue, UI is dance. My code is simple while hovering drag and drop option I am appending the one extra dotted div,on hover out I am deleting the dotted div. while appending after appending not giving any issue, but before appending , UI is dancing. I am not supposed to use jquery UI.

I find out the problem, while creating the extra div ,drop hover has been moved, the extra div creating and deleting looping.

Is there any idea can some one give?

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();
            }

        },
Ad

Answer

I did not able to solve this, So I used html5Sortable. This is easy to use and solve the dance problem, and it requires only jquery. not jquery ui.

Ad
source: stackoverflow.com
Ad