jQuery网页图层拖拽对齐插件


jQuery网页图层拖拽对齐插件
jQuery网页图层拖拽对齐插件以及网页图层、拖拽对齐等js/jquery网页特效代码下载。

1. 引入JS

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/jquery-magnet.min.js"></script>

2. HTML代码

	<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>
      (($) => {
        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('show');
              } else {
                $vertMagnet.removeClass('show');
              }
              if (resultY) {
                $horiMagnet.css('top', (resultY.position+'px'));
                $horiMagnet.addClass('show');
              } else {
                $horiMagnet.removeClass('show');
              }
            });
          // generate block
          function genBlock() {
            const rootWidth = $window.width();
            const rootHeight = $window.height();
            const width = Math.max(30, parseInt(Math.random()*rootWidth/2));
            const height = Math.max(30, parseInt(Math.random()*rootHeight/2));
            const $checkbox = $('<input>')
              .attr('type', 'checkbox')
              .prop('checked', true)
              .on('mousedown touchstart', (evt) => evt.stopPropagation())
              .on('change', function() {
                let block = this.parentNode;
                if (this.checked) {
                  block.style.resize = 'none';
                  $magnet.add(block);
                } else {
                  block.style.resize = 'both';
                  $magnet.remove(block);
                }
              });
            const $block = $('<span>')
              .css({
                width: `${width}px`,
                height: `${height}px`,
                top: `${parseInt(Math.random()*(rootHeight-height))}px`,
                left: `${parseInt(Math.random()*(rootWidth-width))}px`,
                backgroundColor: `rgba(${[0, 0, 0].map(() => parseInt(100+Math.random()*155)).concat(.25+(.75*Math.random())).join(', ')})`,
              })
              .addClass('block')
              .on('mousedown', function(e) {
                this.style.zIndex = 10;
              })
              .on('click', function() {
                this.style.zIndex = 1;
                $(this).parent().append(this);
              })
              .on('dblclick', function() {
                $checkbox = $(this).find('input[type=checkbox]');
                const checked = $checkbox.prop('checked');
                $checkbox.prop('checked', !checked);
                if (checked) {
                  $magnet.add(this);
                } else {
                  $magnet.remove(this);
                }
              })
              .on('attract unattract attracted unattracted', function(e) {
                console.log(e.type, e);
              })
              .append($checkbox)
              .appendTo($container);
            return $block;
          }
          // distance
          $('#dist')
            .on('change', function() {
              $magnet.distance(this.value);
            })
            .val($magnet.distance());
          // add one block
          $('#add').on('click', () => {
            $magnet.add(genBlock());
          });
          // enable/disable fix edge
          $('#fix')
            .on('change', function() {
              $magnet.stayInParent(this.checked);
            })
            .prop('checked', $magnet.stayInParent());
          // enable/disable align parent middle
          $('#parentMiddle')
            .on('change', function() {
              $magnet.alignParentCenter(this.checked);
            })
            .prop('checked', $magnet.alignParentCenter());
          // enable/disable align outside
          $('#outside')
            .on('change', function() {
              $magnet.alignOuter(this.checked);
            })
            .prop('checked', $magnet.alignOuter());
          // enable/disable align inside
          $('#inside')
            .on('change', function() {
              $magnet.alignInner(this.checked);
            })
            .prop('checked', $magnet.alignInner());
          // enable/disable align middle
          $('#middle')
            .on('change', function() {
              $magnet.alignCenter(this.checked);
            })
            .prop('checked', $magnet.alignCenter());
          // init blocks
          for (let bInx=(2+parseInt(Math.random()*3)); 0<bInx; bInx--) {
            $magnet.add(genBlock());
          }
        });
      })(jQuery);
    </script>

相关推荐

发表评论

相关文章