拖动DIV到指定的区域,不是该区域不允许拖动

小灰灰 2022-06-14 04:18 133阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
      
        <script src="Scripts/jquery-1.10.2.min.js"></script>
        <style type="text/css">
            .drag {
                position: absolute;
                width: 100px;
                height: 100px;
                border: 1px solid #96C2F1;
                background-color: #EFF7FF;
                cursor: move;
                line-height: 100px;
                text-align: center;
            }
    
    
            td {
                width: 200px;
                height: 200px;
                border: 1px solid black;
            }
        </style>
        <script type="text/javascript">
    
            ; (function (document) {
                //Usage: $("#id").drag()
                //Author: hooyes
                var Containters = new Array();
                $.fn.Drag = function () {
                    var OriginX, OriginY;
                    var M = false;
                    var Rx, Ry;
                    var t = $(this);
                    var left, top, right, bottom;
                    t.mousedown(function (event) {
                        OriginX = t.offset().left;
                        OriginY = t.offset().top;
                        Rx = event.pageX - (t.offset().left || 0);
                        Ry = event.pageY - (t.offset().top || 0);
                        t.css({ position: "absolute", cursor: 'move', top: OriginY, left: OriginX }).fadeTo(20, 0.5);
                        M = true;
                    })
                .mouseup(function (event) {
                    M = false; t.fadeTo(20, 1);
                    for (var i = 0; i < Containters.length; i++) {
                        var o = Containters[i];
                        if (left >= o.left && top >= o.top && right <= o.right && bottom <= o.bottom) {
                            t.css({ top: 0, left: 0, margin: 'auto', position: "relative" });
                            o.obj.append(t);
                            break;
                        } else {
                            t.css({ top: OriginY, left: OriginX });
                        }
                    }
                });
                    $(document).mousemove(function (event) {
                        if (M) {
                            left = event.pageX - Rx;
                            top = event.pageY - Ry;
                            right = left + t.width();
                            bottom = top + t.height();
                            t.css({ top: top, left: left });
                            Containters.forEach(function (o) {
                                if (left >= o.left && top >= o.top && right <= o.right && bottom <= o.bottom) {
                                    o.obj.css('background-color', '#EAE3E9');
                                } else {
                                    o.obj.css('background-color', '');
                                }
                            });
                        }
                    });
                },
                $.fn.Containt = function () {
                    this.each(function (i, d) {
                        Containters.push({ obj: $(d), top: $(d).offset().top, left: $(d).offset().left, right: $(d).offset().left + $(d).width(), bottom: $(d).offset().top + $(d).height() });
                    });
                }
            })(document);
    
    
            $(document).ready(function () {
                $("#Div1").Drag();
                $("td").Containt();
            });
        </script>
    </head>
    <body>
        <div id="Div1" class="drag">我是DIV1</div>
        <div class="box">
            <div>
                <table>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
    </html>