<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>實現div拖拽時出現輔助線，以方便和其它div很容易的對齊，實現簡單布局器</title> <link rel="stylesheet" href="./jquery-ui-1.12.1/jquery-ui.min.css" /> </head> <body> <!-- 網格線 --> <div id="grid-line"></div> <div class="container"> <!-- 拖動輔助線 --> <div id="guide-h" class="guide"></div> <div id="guide-v" class="guide"></div> <div class="draggable"></div> <div class="draggable" style="background-color: blanchedalmond;"></div> </div> <script src="./jquery-ui-1.12.1/external/jquery/jquery.js"></script> <script src="./jquery-ui-1.12.1/jquery-ui.min.js"></script> <script> const gridSpace = 50 // 拖拽部件選項 const draggableOption = { // 約束在指定元素或區域的邊界內拖拽 containment: '.container', // 鼠標按下后拖拽開始前必須移動的距離，以像素計。該選項可以防止點擊在某個元素上時不必要的拖拽 distance: 10, // 當被拖拽時助手（helper）的不透明度 opacity: 0.5, // 如果設置為 true，當拖拽時容器會自動滾動 scroll: true, // 從要滾動的視區邊緣起的距離，以像素計。距離是相對於指針的，不是相對於 draggable。如果 scroll 選項是 false 則忽略 scrollSensitivity: 20, // 當鼠標指針獲取到在 scrollSensitivity 距離內時，窗體滾動的速度。如果 scroll 選項是 false 則忽略 scrollSpeed: 100, // 對齊拖拽助手（helper）到網格，每個 x 和 y 像素。數組形式必須是 [ x, y ] grid: [gridSpace, gridSpace], // 如果設置為 true，在每次鼠標移動（mousemove）時都會計算所有可放置的位置。注意：這解決了高度動態的問題，但是明顯降低了性能 // refreshPositions: true, // 拖拽操作期間的 CSS 光標 cursor: 'move', // 元素是否對齊到其他元素 snap: true, // 從要發生對齊的對齊元素邊緣起的距離，以像素計。如果 snap 選項是 false 則忽略 snapTolerance: 20 } // 縮放部件選項 const resizeableOption = { // 約束在指定元素或區域的邊界內拖拽 containment: '.container', // 當用戶鼠標沒有懸浮在元素上時是否隱藏手柄 autoHide: true, // 把可調整尺寸元素對齊到網格，每個 x 和 y 像素。數組形式必須是 [ x, y ] grid: [gridSpace, gridSpace], // 如果設置為 true，則為調整尺寸顯示一個半透明的輔助元素 // ghost: true // grid: 50 // resizable 允許被調整到的最小寬度 minWidth: 50, // resizable 允許被調整到的最小高度 minHeight: 50 } $(function() { // 初始化組件拖拽、縮放 initComponent('.draggable') }) // 初始化組件拖拽、縮放 function initComponent(selector) { $(selector) // 拖拽部件文檔：https://www.jqueryui.org.cn/api/3722.html .draggable( Object.assign(draggableOption, { /** * 在拖拽期間當鼠標移動時觸發 */ drag: function(event, ui) { const x = ui.position.left const y = ui.position.top const containerHeight = $('.container').height() + $('.container').scrollTop() const containerWidth = $('.container').width() + $('.container').scrollLeft() initGrid() $('#guide-v').css({ height: containerHeight + 'px', left: x }) $('#guide-h').css({ width: containerWidth + 'px', top: y }) $('#guide-v,#guide-h').show() }, /** * 當拖拽停止時觸發 */ stop: function(event, ui) { $('.container .grid-line').remove() $('#guide-v,#guide-h').hide() } }) ) // 縮放部件文檔：https://www.jqueryui.org.cn/api/3725.html .resizable( Object.assign(resizeableOption, { /** * 在調整尺寸期間當調整手柄拖拽時觸發 * @param {Event} event 事件對象 * @param {Object} ui 拖拽 ui 元素 * helper - jQuery 對象，表示被調整尺寸的助手（helper） * originalElement - jQuery 對象，表示被包裹之前的原始元素 * originalPosition - resizable 調整前的位置，表示為 { top, left } * originalSize - resizable 調整前的尺寸，表示為 { width, height } * position - 助手（helper）的當前 CSS 位置，比如 { top, left } 對象 * size - 助手（helper）的當前大小，比如 { top, left } 對象 */ resize: function(event, ui) { initGrid() }, /** * 當調整尺寸操作停止時觸發 */ stop: function(event, ui) { $('.container .grid-line').remove() } }) ) } function initGrid() { const containerHeight = $('.container').height() + $('.container').scrollTop() const containerWidth = $('.container').width() + $('.container').scrollLeft() $('.container .grid-line').remove() let lineTop = 0 while (lineTop < containerHeight) { let gridLine = $('#grid-line').clone() gridLine.removeAttr('id') gridLine.addClass('grid-line') gridLine.addClass('grid-line-h') gridLine.attr('top', lineTop) gridLine = gridLine[0] lineTop += gridSpace gridLine.style.top = lineTop + 'px' gridLine.style.left = '0px' gridLine.style.width = containerWidth + 'px' gridLine.style.height = '1px' $('.container').append(gridLine) } let lineLeft = 0 while (lineLeft < containerWidth) { let gridLine = $('#grid-line').clone() gridLine.removeAttr('id') gridLine.addClass('grid-line') gridLine.addClass('grid-line-v') gridLine.attr('left', lineLeft) gridLine = gridLine[0] lineLeft += gridSpace gridLine.style.top = '0px' gridLine.style.left = lineLeft + 'px' gridLine.style.width = '1px' gridLine.style.height = containerHeight + 'px' $('.container').append(gridLine) } } </script> <style> .container { /* margin-top: 100px; */ top: 20px; min-height: 700px; /* padding-bottom: 100px; */ position: relative; /* 修復拖拽元素吸附到其他元素時超出容器區域 */ overflow: scroll; /* background-color: gray; */ border: 1px #c0c0c0 solid; z-index: 0; } .container .grid-line { position: absolute; z-index: 0; /* border: 1px red solid; */ } .container .grid-line-h { border-top: 1px dashed rgb(236, 236, 236); /* border-top: 1px dashed rgb(255, 0, 0); */ width: 100%; } .container .grid-line-v { border-left: 1px dashed rgb(236, 236, 236); /* border-left: 1px dashed rgb(255, 0, 0); */ height: 100%; } .draggable { width: 150px; height: 150px; background-color: gray; position: absolute; top: 0px; left: 0px; z-index: 1; } .guide { display: none; position: absolute; left: 0; top: 0; } /* 水平 */ #guide-h { border-top: 1px red solid; width: 100%; } /* 垂直 */ #guide-v { border-left: 1px red solid; height: 100%; } </style> </body> </html>