拖動DIV到指定的區域,不是該區域不允許拖動
阿新 • • 發佈：2019-01-29
<!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>