drag-widget

项目介绍

drag-widget 为衍生后的drag，含盖了 网格，卡尺，拖拽寻找标尺线进行吸附，改变宽高进行寻找标尺线吸附，从而提高了拖拽元素对齐的准确性。

源码启动

初始化

npm install

本地服务

npm run start

npm 安装

npm i drag-widget

以及简单的使用

html

<div class="Wrap"  id="Wrap">
         <div class="calipersWrap" >
            <canvas id="calipers" class="calipers" width="2000px" height="2000px"></canvas>
         </div>
         <div class="editorWrap" id="editorWrap">
            <div class="cavasWrap">
                <canvas id="canvas" class="cavas" width="1000px" height="1000px"></canvas>
                <div class="bgWrap"></div>
             </div>
             <div class="componentsWrap" id="componentsWrap">
                 <div class="">
                    <div class="item" data-id="1" z-index='1' style="z-index:1">
                        <span>1111</span>
                        <span>1111</span>
                        <span>1111</span>
                        <span>1111</span>
                        <span>1111</span>
                    </div>
                    <div class="item" data-id="2" z-index='2'  style="top:200px;left:300px;z-index:2"></div>
                    <div class="item" data-id="3" z-index='3'  style="top:100px;left:300px;z-index:3"></div>
                    <div class="item" data-id="4" z-index='4'  style="top:230px;left:500px;z-index:4"></div>
                    <div class="item" data-id="5" z-index='5'  style="top:277px;left:300px;z-index:5"></div>
                    <div class="item" data-id="6" z-index='6'  style="top:150px;left:200px;z-index:6"></div>
                    <div class="item" data-id="7" z-index='7'  style="top:600px;left:300px;z-index:7"></div>
                 </div>
             </div>
         </div>
     </div>

CSS

    .Wrap,body,html{
        width:100%;
        height: 100%;

    }
    *{
        padding:0;
        margin:0;
    }
    .wrap{
        position: relative;
    }
    .calipersWrap{
        position: absolute;
        left: 0;
        top:0;
        z-index: 0;
        width:100%;
        height: 100%;
    }
    .calipers{
        background:#ccc;
        
    }
    .editorWrap{
        width:1000px;
        height: 500px;
        margin:20px  auto 0 auto;
    }
    .cavasWrap{
    position: absolute;
        z-index: 1;
    }
    .cavas{
        position: absolute;
    }
    .componentsWrap{
        width:1000px;
        height: auto;
        position: absolute;
        z-index: 2;
    }
    .componentsWrap .item{
        width:150px;
        height: 150px;
        background:yellow;
        position: absolute;
        left: 0;
        top:0;
    }
    
    .resizeWrap >span{
        position: absolute;

    }
    .resizeWrap >span.l{
        width:3px;
        background:red;
        top:0;
        left:0;
        z-index: 9;
        cursor:w-resize;
    }
    .resizeWrap >span.r{
        width:3px;
        background:red;
        top:0;
        right:0;
        z-index: 9;
        cursor:w-resize;
    }
    .resizeWrap >span.t{
        height:3px;
        background:red;
        top:0;
        right:0;
        z-index: 9;
        cursor:s-resize;
    }
    .resizeWrap >span.b{
        height:3px;
        background:red;
        bottom:0;
        right:0;
        z-index: 9;
        cursor:s-resize;
    }
    .resizeWrap >span.lt,.resizeWrap >span.lb,.resizeWrap >span.rt,.resizeWrap >span.rb{
        width:10px;
        height: 10px;
        position: absolute;
        border:1px solid red;
        z-index: 10;
    }
    .resizeWrap >span.lt{
        top:-5px;
        left:-5px;
        cursor:se-resize;
    }
    .resizeWrap >span.lb{
        bottom:-5px;
        left:-5px;
        cursor:ne-resize;
    }
    .resizeWrap >span.rt{
        top:-5px;
        right:-5px;
        cursor:ne-resize;
    }
    .resizeWrap >span.rb{
        bottom:-5px;
        right:-5px;
        cursor:se-resize;
    }
    .tipsWrap{
        position: absolute;
        bottom:-55px;
        right:-115px;
        background:rgba(0, 0,0, 0.5);
        width:100px;
        
        border-radius: 5px;
        color:#fff;
    }
    .tipsWrap > p{
        height: 25px;
        line-height: 25px;
        padding-left: 10px;
        box-sizing: border-box;
        font-size: 12px;
    }

JS

import {DragWidget} from 'drag-widget'
 new DragWidget({
    target:document.getElementById('Wrap'),
    editorWrap:document.getElementById('editorWrap'),
    componentsWrap:document.getElementById('componentsWrap'),
    eventItem:'.item',
    cavasEl:document.getElementById('canvas'),
    cavasWidth:1000,
    cavasHeigth:1000,
    spacing:20,//线间距
    adsorptionNum:10,//组件之间吸附的间距
    linecolor:'#0088ff',
    resize:function(obj){
        console.log("resize",obj);
    },
    drag:function(obj){
        console.log(obj);
    },
    calipers:{
        cavasEl:document.getElementById('calipers'),
    }
})