jquery-ui draggable中div拖動出現輔助線方便對齊，實現簡單佈局器

阿新 • • 發佈：2020-11-27

<!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>