Question

我想让整个HTML块可拖动，而不仅仅是文本或图片，所以我想出了这个：http://jsfiddle.net/8D7YK/

释放鼠标按钮时不会触发拖动结束事件。跌落事件也不会。你知道为什么吗？

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>

感谢您的帮助！

PS：我不打算使用jQuery UI

Answer 1

脚本在 dragend 事件中停止在

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

线。我尝试在它之前和之后发出一些警告，然后它才能正常工作，但之后却没有。

Answer 2

我的猜测是你正在使用firefox浏览器。 MDN表示，基于壁虎的浏览器不会触发“直播”。如果节点被移动，则为event。请检查此链接： https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#dragend

我还检查了你问题中的jsFiddle链接，并更改了“拖动器”和＃39;到了＃dra;＆＃39;并尝试使用chrome，它有效。

我认为在＆＃39; drop＆＃39;中解决unbind问题。会做的不是把它绑定在＆＃39; dragend＆＃39;

JavaScript - 没有触发的dragend和drop事件

2 个答案: