0

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

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

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

4

2 回答 2

1

脚本在您的dragend事件中停止

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

线。我试图在它工作之前和之后发出一些警报，但不是在它工作之后。

于 2014-02-13T13:19:27.090 回答
0

我的猜测是您使用的是Firefox浏览器。MDN 表示，如果节点移动，基于壁虎的浏览器不会触发 'dragend' 事件。请检查此链接： https ://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#dragend

我还检查了您问题中的 jsFiddle 链接，并将“dragstop”更改为“dragend”并在 chrome 中尝试了它，它有效。

我认为在“drop”中处理 unbind 会比在“dragend”中绑定它更有效

于 2018-03-19T14:36:30.307 回答