ekokotov / object-table

Angular directive to easy create dynamic tables from source or URL with sorting, filtering and pagination. Smart templates and good perfomance
BSD 3-Clause "New" or "Revised" License
171 stars 52 forks source link

TypeError: e.dataTransfer is undefined #49

Closed walauahahaha closed 5 years ago

walauahahaha commented 5 years ago

Hi, I experienced an issue where I got the error shown above when I was trying to drag a column, I currently using angular v1.5.11, and I did install jQuery inside my project, due to my project relies much on jQuery I can't uninstall jQuery to test whether it can work without jQuery. I traced the error is in an object-table.js file inside "allowDrag" directive code is at below

function (e) { a.target = this, this.classList.add("dragged"), e.dataTransfer.setData("text", a.target.cellIndex) })


I hope I can get a reply ASAP, thank you so much for reading my message

ekokotov commented 5 years ago

What kind of error did you face ? I need a stack trace or sandbox example.

walauahahaha commented 5 years ago

a The screenshot above is the error that prompted at browser b c The screenshot above is the html file, I using angularJS but I did not put anything in .js file d

This code below is where it prompted out an error (object-table.js) ` angular.module("objectTable").directive("allowDrag", function () {

    return {
        restrict: "A",
        controller: function () { },
        compile: function (e, t) {
            function r(e, t) { var r = e[0].parentNode.querySelector("." + t); r && r.classList.remove(t) }
            return function (e, t, n, a) {
                t.attr("draggable", !0), t.bind("dragstart",
                    function (e) {
                    a.target = this, this.classList.add("dragged"),
                        e.dataTransfer.setData("text", a.target.cellIndex)
                    }), t.bind("dragover",
                        function (e) { e.preventDefault() }), t.bind("dragenter", function (e) {
                        a.toTarget = this,
                            this.classList.contains("draggedOver") || this.classList.contains("dragged") || this.classList.add("draggedOver"),
                            e.preventDefault(), e.stopPropagation()
                        }), t.bind("dragend",
                            function (e) {
                                this.classList.contains("dragged") && this.classList.remove("dragged"),
                                e.preventDefault()
                            }), t.bind("dragleave", function (e) { this.classList.remove("draggedOver") }), t.bind("drop", function (e) {
                                var n = a.toTarget.cellIndex,
                                o = parseInt(e.dataTransfer.getData("text"), 10); r(t, "dragged"), r(t, "draggedOver"), 
                                t.parent().controller("objectTable").changeColumnsOrder(n, o), e.preventDefault()
                            })
            }
        }
    }
}),`

Thank you for seeing my message, I really appreciate it

ekokotov commented 5 years ago

mh.. as I can see in sources it should use jquery event wrapper as well: image What jquery version and what angular-object-table version do you use? (npm -v )

ekokotov commented 5 years ago

@walauahahaha as I can see in 0.2.5 it's fixed already: image

ekokotov commented 5 years ago

I've just rebuild the package with the latest code. Please try to use version 0.2.6

walauahahaha commented 5 years ago

Thank you so much for your effort. Now, I can drag and drop the table column, appreciate your help, god bless you.

ekokotov commented 5 years ago

u are welcome. thank you!