jquery - JavaScript - dragend and drop events not firing

I want to make whole HTML blocks draggable, not just text or images, so i've e up with this : /

The drag end event won't fire when i release the mouse button. Neither will the drop event. Do you know why ?

CSS :

html * {
    margin: 0;
    padding: 0;
    }
table {
    position: relative; 
    }
td {
    padding: 5px;
    background: #DDF;
    }

JS :

(function($) {
    $(document).ready(function() {

        var $this;

        var mouseMoveHandler = function(e) {
            $this.css('position', 'fixed')
                 .css('top', e.pageY - $this.height() / 2)
                 .css('left', e.pageX - $this.width() / 2);
        };

        $('td').on({
            dragstart: function(e) {
                $this = $(this);
                $(window).bind('mousemove', mouseMoveHandler);
            },
            dragenter: function(e) {
                alert('dragenter');                 
            },
            dragleave: function() {
                alert('dragleave');
            },
            dragover: function(e) {
                e.preventDefault(); // Chrome / Safari
                alert('dragover');
            },
            drop: function(e) {
                alert('drop');
            },
            dragend: function(e) {
                var data = e.dataTransfer.getData('text/html');
                $this.html($(this).html());
                $(this).html(data);
                $(window).unbind('mousemove', mouseMoveHandler);
            },
            click: function() {
            }
        });

    });
})(jQuery);

HTML :

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <table>
            <tr>
                <td draggable="true">TEXT_00</td>
                <td draggable="true">TEXT_01</td>
                <td draggable="true">TEXT_02</td>
                <td draggable="true">TEXT_03</td>
                <td draggable="true">TEXT_04</td>
            </tr>
            <tr>
                <td draggable="true">TEXT_10</td>
                <td draggable="true">TEXT_11</td>
                <td draggable="true">TEXT_12</td>
                <td draggable="true">TEXT_13</td>
                <td draggable="true">TEXT_14</td>
            </tr>
            <tr>
                <td draggable="true">TEXT_20</td>
                <td draggable="true">TEXT_21</td>
                <td draggable="true">TEXT_22</td>
                <td draggable="true">TEXT_23</td>
                <td draggable="true">TEXT_24</td>
            </tr>
            <tr>
                <td draggable="true">TEXT_30</td>
                <td draggable="true">TEXT_31</td>
                <td draggable="true">TEXT_32</td>
                <td draggable="true">TEXT_33</td>
                <td draggable="true">TEXT_34</td>
            </tr>
            <tr>
                <td draggable="true">TEXT_40</td>
                <td draggable="true">TEXT_41</td>
                <td draggable="true">TEXT_42</td>
                <td draggable="true">TEXT_43</td>
                <td draggable="true">TEXT_44</td>
            </tr>
        </table>
    </body>
</html>

Thanks for your help !

PS : i'm not planning to use jQuery UI

I want to make whole HTML blocks draggable, not just text or images, so i've e up with this : http://jsfiddle/8D7YK/

The drag end event won't fire when i release the mouse button. Neither will the drop event. Do you know why ?

CSS :

html * {
    margin: 0;
    padding: 0;
    }
table {
    position: relative; 
    }
td {
    padding: 5px;
    background: #DDF;
    }

JS :

(function($) {
    $(document).ready(function() {

        var $this;

        var mouseMoveHandler = function(e) {
            $this.css('position', 'fixed')
                 .css('top', e.pageY - $this.height() / 2)
                 .css('left', e.pageX - $this.width() / 2);
        };

        $('td').on({
            dragstart: function(e) {
                $this = $(this);
                $(window).bind('mousemove', mouseMoveHandler);
            },
            dragenter: function(e) {
                alert('dragenter');                 
            },
            dragleave: function() {
                alert('dragleave');
            },
            dragover: function(e) {
                e.preventDefault(); // Chrome / Safari
                alert('dragover');
            },
            drop: function(e) {
                alert('drop');
            },
            dragend: function(e) {
                var data = e.dataTransfer.getData('text/html');
                $this.html($(this).html());
                $(this).html(data);
                $(window).unbind('mousemove', mouseMoveHandler);
            },
            click: function() {
            }
        });

    });
})(jQuery);

HTML :

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <table>
            <tr>
                <td draggable="true">TEXT_00</td>
                <td draggable="true">TEXT_01</td>
                <td draggable="true">TEXT_02</td>
                <td draggable="true">TEXT_03</td>
                <td draggable="true">TEXT_04</td>
            </tr>
            <tr>
                <td draggable="true">TEXT_10</td>
                <td draggable="true">TEXT_11</td>
                <td draggable="true">TEXT_12</td>
                <td draggable="true">TEXT_13</td>
                <td draggable="true">TEXT_14</td>
            </tr>
            <tr>
                <td draggable="true">TEXT_20</td>
                <td draggable="true">TEXT_21</td>
                <td draggable="true">TEXT_22</td>
                <td draggable="true">TEXT_23</td>
                <td draggable="true">TEXT_24</td>
            </tr>
            <tr>
                <td draggable="true">TEXT_30</td>
                <td draggable="true">TEXT_31</td>
                <td draggable="true">TEXT_32</td>
                <td draggable="true">TEXT_33</td>
                <td draggable="true">TEXT_34</td>
            </tr>
            <tr>
                <td draggable="true">TEXT_40</td>
                <td draggable="true">TEXT_41</td>
                <td draggable="true">TEXT_42</td>
                <td draggable="true">TEXT_43</td>
                <td draggable="true">TEXT_44</td>
            </tr>
        </table>
    </body>
</html>

Thanks for your help !

PS : i'm not planning to use jQuery UI

Share Improve this question edited Apr 20, 2013 at 11:28 asked Apr 20, 2013 at 10:46 Virus721 8,37514 gold badges76 silver badges129 bronze badges

Yes sorry, i changed it just to test, but dragend does not work either. – Virus721 Commented Apr 20, 2013 at 11:28
Could not reproduce. Using Opera with fixed dragstop -> dragend. – TNW Commented Apr 20, 2013 at 11:31
Is this code working on opera ? :o I'm using waterfox actually, could be just a bug... – Virus721 Commented Apr 20, 2013 at 11:32
@Virus721 I don't know about the code, but yes, event fires. – TNW Commented Apr 20, 2013 at 11:35
Yeah i've just downloaded opera and tried it but it behaves strangly : hen i start dragging it does like if i was dragging an image, there is a stop cursor and an opacity on what i drag. Strange. – Virus721 Commented Apr 20, 2013 at 11:37

Add a ment |

2 Answers 2

Sorted by: Reset to default 1

The script stops inside your dragend event at the

var data = e.dataTransfer.getData('text/html');

line. I tried to put some alerts before and after and well, before it it's working, but not after it.

My guess is you are using a firefox browser. MDN says that gecko based browser's DO NOT fire a 'dragend' event if the node is moved. Do check this link out: https://developer.mozilla/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#dragend

Also I checked the jsFiddle link in your question and changed the 'dragstop' to 'dragend' and tried it in chrome, it worked.

I think handling the unbind in the 'drop' would do the trick than binding it in 'dragend'

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

jquery - JavaScript - dragend and drop events not firing - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)