jquery-magnet实现带对齐线磁力吸拖拽效果代码-html代码-BFW代码库

jquery-magnet实现带对齐线磁力吸拖拽效果代码

代码语言：html

所属分类：拖放

代码描述：jquery-magnet实现带对齐线磁力吸拖拽效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

    <style>
        body {
            margin: 0;
          }
          * { font-size: 3vmin; }
          #lines, #paper {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
          }
          #paper {
            display: flex;
            flex-flow: column;
          }
          #tool {
            padding: 1vmin;
            background-color: #eee;
            font-family: monospace;
            line-height: 150%;
          }
          #container {
            flex: 2 2;
          }
          .item { white-space: nowrap; }
          input, button {
            outline: none;
            border: .1vmin solid #666;
            font-family: monospace;
            color: #333;
          }
          input[type=checkbox] {
            width: 3vmin;
            height: 3vmin;
          }
          button { background-color: #eee; }
          button:active { transform: translate(.1vmin, .1vmin); }
          #lines {
            z-index: 1;
            pointer-events: none;
          }
          #lines >* {
            position: absolute;
            width: 1px;
            height: 1px;
            background-color: #999;
            opacity: 0;
          }
          #lines >.show { opacity: .5; }
          #lines .vert {
            transform: translateX(-50%);
            height: 100%;
          }
          #lines .hori {
            transform: translateY(-50%);
            width: 100%;
          }
          .block {
            position: absolute;
            overflow: auto;
          }
          .block input {
            position: absolute;
            top: 0;
            right: 0;
          }
    </style>
</head>

<body>
    <div id="lines">
        <span class="vert"></span>
        <span class="hori"></span>
    </div>
    <div id="paper">
        <span id="tool">
        <span class="item">Distance: <input id="dist" type="number" min="0" max="20" /></span>
        <button id="add">Add Block</button>
        <span class="item"><input id="fix" type="checkbox" /><label for="fix">Fix edge</label></span>
        <span class="item"><input id="parentMiddle" type="checkbox" /><label for="parentMiddle">Align Parent Middle</label></span>
        <span class="item"><input id="outside" type="checkbox" /><label for="outside">Align Outside</label></span>
        <span class="item"><input id="inside" type="checkbox" /><label for="inside">Align Inside</label></span>
        <span class="item"><input id="middle" type="checkbox" /><label for="middle">Align Middle</label></span>
        </span>
        <div id="container"></div>
    </div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-magnet.min.js"></script>
    <script>
        (($) => {
            const $window = $(window);
            const $magnet = $.magnet({
              distance: 15,
              attractable: true,
              allowCtrlKey: true,
            });
    
            $window.on('load', () => {
              const $container = $('#container');
              const $mask = $('#lines');
              const $horiMagnet = $mask.find('.hori');
              const $vertMagnet = $mask.find('.vert');
    
              $magnet
                .on('start change end', ({ type }) => {
                  console.log(`magnet${type}`);
                })
                .on('end', () => {
                  $horiMagnet.removeClass('show');
                  $vertMagnet.removeClass('show');
                })
                .on('change', (e) => {
                  // show/hide horizon/vertical edge line
                  let result = e.detail;
                  let resultX = result.x;
                  let resultY = result.y;
                  if (resultX) {
                    $vertMagnet.css('left', (resultX.position+'px'));
                    $vertMagnet.addClass(.........完整代码请登录后点击上方下载按钮下载查看