橡皮筋功能 - Anby-PBH

类似微信、qq截图功能；

<html> 
<head></head> 
<link rel="stylesheet" href="chose.css">
<body> 
    <div contenteditable="true"></div>
   
    <!-- <div id="selectBox">
        <button id="addButton">添加文字</button>
    </div> -->
    <!-- <button id="addButton">添加文字</button> -->
    <div class="container">
        <div class="fileDiv">file1</div> 
        <div class="fileDiv">file2</div> 
        <div class="fileDiv">file3</div> 
        <div class="fileDiv">file4</div> 
        <div class="fileDiv">file5</div> 
        <div class="fileDiv">file6</div> 
        <div class="fileDiv">file7</div> 
        <div class="fileDiv">file8</div> 
        <div class="fileDiv">file9</div> 
    <!-- 创建8个小的div进行拉伸效果 -->
  </body> 
<script type="text/javascript">
(function() { 
    // document.onselectstart = new Function('event.returnValue=false')
    var container = document.getElementsByClassName("container")[0];
    container.onmousedown = function(e) { 
    //  alert(1)
    e.stopPropagation()
    var selList = []; //存放选取文件数组
    var fileNodes = document.getElementsByTagName("div");
    for ( var i = 0; i < fileNodes.length; i++) { 
      if (fileNodes[i].className.indexOf("fileDiv") != -1) { 
        fileNodes[i].className = "fileDiv"; 
        //将页面文件放入数组中
        selList.push(fileNodes[i]); 
      } 
    } 
  
    var isSelect = true; //默认没有被选择
    var evt = window.event || arguments[0]; 
    //方框起始位置，当前所在区域
     startX = (evt.x || evt.clientX); 
     startY = (evt.y || evt.clientY); 
    //创建方框
    var selDiv = document.createElement("div"); 
    selDiv.style.cssText = "position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px dashed #0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;"; 
    selDiv.id = "selectDiv"; //添加id
    document.body.appendChild(selDiv);//放入页面中
    //创建盒子
//     var selectBox = document.createElement("div");
//     selectBox.style.cssText = "position:absolute;"
//     selectBox.id = "selectBox";
//     selDiv.appendChild(selectBox);
//    console.log(selectBox)


    selDiv.style.left = startX + "px"; 
    selDiv.style.top = startY + "px"; 
   




    var _x = null; 
    var _y = null; 
    clearEventBubble(evt); 
  
    container.onmousemove = function(e) { 
      evt = window.event || arguments[0];

      selDiv.innerHTML=CreateStretch;
      var textDetail = document.getElementById("textDetail");

   textDetail.style.cssText = "display:none"
      if (isSelect) { //鼠标移动的时候元素被选中
        if (selDiv.style.display == "none") { 
          selDiv.style.display = ""; //让方框显示
        }
      
        //鼠标移动后的位置
        _x = (evt.x || evt.clientX); 
        _y = (evt.y || evt.clientY); 
        //设置方框的区域位置
         selDiv.style.left = Math.min(_x, startX) + "px"; 
        selDiv.style.top = Math.min(_y, startY) + "px"; 
        selDiv.style.width = Math.abs(_x - startX) + "px"; //绝对值
        selDiv.style.height = Math.abs(_y - startY) + "px";
  
        // ---------------- 关键算法 ---------------------  
        //获取元素的宽高以及距离body的top和left值
        var _l = selDiv.offsetLeft, _t = selDiv.offsetTop; 
        var _w = selDiv.offsetWidth, _h = selDiv.offsetHeight; 
        for ( var i = 0; i < selList.length; i++) {
            //遍历每一个文件，根据其所在的位置来判断元素是否被选中，
            //将选中的元素添加seled类名
          var sl = selList[i].offsetWidth + selList[i].offsetLeft; 
          var st = selList[i].offsetHeight + selList[i].offsetTop; 
          if (sl > _l && st > _t && selList[i].offsetLeft < _l + _w && selList[i].offsetTop < _t + _h) { 
            if (selList[i].className.indexOf("seled") == -1) { 
              selList[i].className = selList[i].className + " seled"; 
            } 
          } else { 
            if (selList[i].className.indexOf("seled") != -1) { 
              selList[i].className = "fileDiv"; 
            } 
          } 
        } 
  
      } 
      clearEventBubble(evt); 
    } 
   //鼠标弹起的时候，选取完毕；
    document.onmouseup = function(e) { 
      e.stopPropagation();
      isSelect = false; 
      //在选取框存在的时候，开始计算文件个数
      if (selDiv) { 
        // document.body.removeChild(selDiv); 
        showSelDiv(selList); 
        enlarge();//扩展
        drag();
        addText();
      } 
      selList = null, _x = null, _y = null, selDiv = null, startX = null, startY = null, evt = null; 
    } 
  } 
})(); 
function clearEventBubble(evt) { 
  if (evt.stopPropagation) //阻止冒泡事件，兼容性
    evt.stopPropagation(); 
  else 
    evt.cancelBubble = true; 
  if (evt.preventDefault) 
    evt.preventDefault(); 
  else 
    evt.returnValue = false; 
} 
function showSelDiv(arr) { 
    //将选中元素计数
  var count = 0; 
  var selInfo = ""; 
  for ( var i = 0; i < arr.length; i++) { 
    if (arr[i].className.indexOf("seled") != -1) { 
      count++; 
      selInfo += arr[i].innerHTML + "\n"; 
    } 
  } 
//   alert("共选择 " + count + " 个文件，分别是：\n" + selInfo); 
} 
function CreateStretch(){
    var html = `
    
        <span class="left minSpan"></span>
        <span class="left-up minSpan"></span>
        <span class="left-down minSpan"></span>
        <span class="up minSpan"></span>
        <span class="down minSpan"></span>
        <span class="right minSpan"></span>
        <span class="right-down minSpan"></span>
        <span class="right-up minSpan"></span>
       
        <div id="selectBox">
           <Button id="addButton">添加文字</Button>
           <textarea id = "textDetail" onmousemove = this.focus()></textarea>
           <ul class="content"></ul>
        </div>
    `
   return  html;
}
//鼠标事件，拉伸

function enlarge(){
    //获取所有的按钮
    var rightSpan = document.getElementsByClassName("right")[0];
    var leftSpan = document.getElementsByClassName("left")[0];
    var upSpan = document.getElementsByClassName("up")[0];
    var downSpan = document.getElementsByClassName("down")[0];
    var leftUp = document.getElementsByClassName("left-up")[0]
    var rightUp = document.getElementsByClassName("right-up")[0];
    var rightDown = document.getElementsByClassName("right-down")[0];
    var leftDown = document.getElementsByClassName("left-down")[0];
    var selDiv = document.getElementById("selectDiv");
    rightSpan.onmousedown = function(e){
        e.stopPropagation();
        document.onmousemove=function(e){
           //重新获取鼠标位置
           var _x = (e.x || e.clientX); 
           var  _y = (e.y || e.clientY); 
           var startX = selDiv.offsetLeft ;
           var startY = selDiv.offsetTop;
           console.log(selDiv.offsetLeft,selDiv.offsetTop,'dfsf')
        //    console.log(startX,selDiv.style.width,_x,'123')
           selDiv.style.left = Math.min(_x, startX) + "px"; 
        //    selDiv.style.top = Math.min(_y, startY) + "px"; 
           selDiv.style.width = Math.abs(_x - startX) + "px"; //绝对值
        //    selDiv.style.height = Math.abs(_y - startY) + "px"; 
        //    console.log(selDiv.style.width,'fdsfds')
        }
        document.onmouseup = function(e){
            document.onmousemove = null;
        }
    }
    leftSpan.onmousedown = function(e){
        e.stopPropagation();
        var startX = e.clientX;
        var endWidth= e.clientX + selDiv.offsetWidth;
        document.onmousemove=function(e){
           //重新获取鼠标位置
          var _x = e.clientX;
        console.log(startX,_x,'1234')

          selDiv.style.left = Math.abs(_x,startX) + "px";
          selDiv.style.width = Math.abs(_x-endWidth) + "px"
          
           
          
        }
        document.onmouseup = function(e){
            document.onmousemove = null;
        }
    }
    upSpan.onmousedown = function(e){
        e.stopPropagation();
        var startY = e.clientY;
        var endHeight = e.clientY + selDiv.offsetHeight;
        document.onmousemove=function(e){
           //重新获取鼠标位置
           var  _y = (e.y || e.clientY); 
           console.log(_y,startY,'ewqewq')
           selDiv.style.top = Math.abs(_y, startY) + "px"; 
        //    selDiv.style.width = Math.abs(_x - startX) + "px"; //绝对值
           selDiv.style.height = Math.abs(_y-endHeight) + "px"; 
          
        }
        document.onmouseup = function(e){
            document.onmousemove = null;
        }
    }
    downSpan.onmousedown = function(e){
        e.stopPropagation();
        document.onmousemove=function(e){
           //重新获取鼠标位置
           var _x = (e.x || e.clientX); 
           var  _y = (e.y || e.clientY); 
           var startX = selDiv.offsetLeft ;
           var startY = selDiv.offsetTop;
         
        //    console.log(selDiv.offsetLeft,_x,selDiv.style.width,'123')
        //    selDiv.style.left = Math.min(_x, startX) + "px"; 
           selDiv.style.top = Math.min(_y, startY) + "px"; 
        //    selDiv.style.width = Math.abs(_x - startX) + "px"; //绝对值
           selDiv.style.height = Math.abs(_y - startY) + "px"; 
        console.log(_x,startX,selDiv.style.left,selDiv.style.width,'4324234')
        }
        document.onmouseup = function(e){
            document.onmousemove = null;
        }
    }
    rightUp.onmousedown = function(e){
        e.stopPropagation();
        var startX = e.clientX;
        var startY = e.clientY;
        var startWidth = selDiv.offsetLeft;
        var startHeight = e.clientY +selDiv.offsetHeight;
        document.onmousemove=function(e){
           //重新获取鼠标位置
           var _x = (e.x || e.clientX); 
           var _y = (e.y || e.clientY); 
           var startX = selDiv.offsetLeft;
           var startY = selDiv.offsetTop;
         
           selDiv.style.top = Math.abs(_y, startY) + "px"; 
           selDiv.style.width = Math.abs(_x - startWidth) + "px"; //绝对值
           selDiv.style.height = Math.abs(_y - startHeight) + "px"; 
       
        }
        document.onmouseup = function(e){
            document.onmousemove = null;
        }
    }
    rightDown.onmousedown = function(e){
        e.stopPropagation();
        document.onmousemove=function(e){
           //重新获取鼠标位置
           var _x = (e.x || e.clientX); 
           var  _y = (e.y || e.clientY); 
           var startX = selDiv.offsetLeft ;
           var startY = selDiv.offsetTop;
         
        //    console.log(selDiv.offsetLeft,_x,selDiv.style.width,'123')
           selDiv.style.left = Math.min(_x, startX) + "px"; 
           selDiv.style.top = Math.min(_y, startY) + "px"; 
           selDiv.style.width = Math.abs(_x - startX) + "px"; //绝对值
           selDiv.style.height = Math.abs(_y-startY) + "px"; 
        console.log(_x,startX,selDiv.style.left,selDiv.style.width,'4324234')
        }
        document.onmouseup = function(e){
            document.onmousemove = null;
        }
    }
    leftDown.onmousedown = function(e){
        e.stopPropagation();
        var startWidth = selDiv.offsetWidth + e.clientX;
        var startY = selDiv.offsetTop;

        document.onmousemove=function(e){
           //重新获取鼠标位置
           var _x = (e.x || e.clientX); 
           var _y = (e.y || e.clientY); 
        //    console.log(se
           selDiv.style.left = Math.abs(_x, startX) + "px"; 
        //    selDiv.style.top = Math.min(_y, startY) + "px"; 
           selDiv.style.width = Math.abs(_x - startWidth) + "px"; //绝对值
           selDiv.style.height = Math.abs(_y - startY) + "px"; 
        console.log(_x,startX,selDiv.style.left,selDiv.style.width,'4324234')
        }
        document.onmouseup = function(e){
            document.onmousemove = null;
        }
    }
   leftUp.onmousedown = function(e){
         e.stopPropagation();
         var startX =e.clientX;
         var startHeight = e.clientY + selDiv.offsetTop;
         var endWidth = e.clientX + selDiv.offsetWidth;
         document.onmousemove = function(e){
             e.stopPropagation();
             var _x = (e.x || e.clientX);
             var _y = (e.y || e.clientY);
             selDiv.style.top = Math.abs(_y) + "px";
             selDiv.style.left = Math.abs(_x,startX) + "px";
             selDiv.style.width = Math.abs(_x-endWidth) + "px";
             selDiv.style.height = Math.abs(_y-startHeight) + "px"
         }
   }

    
}

function drag(){
   var selDiv = document.getElementById("selectDiv");
   var selDivs = document.getElementById("selectDiv");
   selDiv.onmousedown = function(evt){
    //    alert(1)
      var e=evt || window.evt;
      e.stopPropagation();
      var offsetX = e.clientX - selDiv.offsetLeft;
      var offsetY = e.clientY -selDiv.offsetHeight;
      document.onmousemove = function(evt){
          var e=evt || window.evt;
          var left = e.clientX - offsetX;
          var top = e.clientY - offsetY;
          selDiv.style.left = left + "px";
          selDiv.style.top = top + "px";
      }
      document.onmouseup = function(e){
          document.onmousemove = null;
          document.onmouseup = null;
      }
   }
}
//点击添加文字

   
function addText(){
   var addButton = document.getElementById("addButton");
   var selectBox = document.getElementById("selectBox");
   var textDetail = document.getElementById("textDetail");
   var contents = document.getElementsByClassName("content")[0];
   textDetail.style.cssText = "display:none"
   

   addButton.onclick = function(event){
    clearEventBubble(event);
    var e = event || window.event;
       e.stopPropagation();
       var pageX = null;
       var pageY = null;
       var flag = false;
       var i = 1;
       var selBox = document.getElementById("selectBox");
       selBox.onclick = function(event){
           var e = event || window.event;
           e.stopPropagation();
           if(flag == false){
               console.log(1)
             pageX = e.offsetX;
             pageY = e.offsetY;
             console.log(pageX,pageY)
             textDetail.style.cssText = `top:${pageY};left:${pageX};font-size:15px;`
             flag = true;
            }else{
                console.log(flag,2)
                console.log(pageX,pageY,2)
                var content = textDetail.value;
                var liDom = document.createElement("li");
                liDom.style.cssText = `top:${pageY};left:${pageX};font-size:15px;`
                if(content !== ''){
                    liDom.innerHTML = content;
                     contents.append(liDom);
                     textDetail.style.cssText = "display:none"
                     textDetail.value = '';
                     flag = false;
                }
               
            }
            
         
           
             
       }
       
           
            
       document.onclick = function(event){
           var e = event || window.event;
          e.stopPropagation();
          textDetail.value = '';
          textDetail.style.cssText = "display:none";
          flag = false;
     }
   }

  
}
// function addText(){
//     var textDetail = document.getElementById("textDetail");
//     var addText = document.getElementById("addButton");
//     addText.onclick = function(e){
//         e.stopPropagation()
//         textDetail.style.cssText="display:none";
//         //动态添加div
//     var flag = false;

//       var selDiv = document.getElementById("selectDiv");
//       selDiv.onclick = function(e){
//           if(flag == false){
//             console.log(e.pageX,e.pageY)
//           alert(1)
//           var  e =event || window.event
//             e.stopPropagation()
//             pageX = e.offsetX;
//             pageY = e.offsetY;
//             console.log(pageX,pageY)
//           textDetail.style.cssText=`top:${pageY};left:${pageX};display:block;`
//           flag = true; 
//         }else{
//               flag = false;
//             //   textDetail.style.cssText="display:none";
//             var content = textDetail.value;
//             var container = document.getElementsByClassName("addWord")[0];
//             var liDom = document.createElement("li");
//             liDom.style.cssText = `top:${pageY};left:${pageX}`;
//             liDom.innerHTML = content;
//             container.append(liDom)
//         // textDetail.style.cssText="display:none";
            
//           }
         
//       }

     
//     }
   
// }
</script>

body{padding:100px;} 
.fileDiv{float:left;width:100px;height:100px;text-align:center;line-height:100px;font-size:12px;border:1px solid #ccc;margin-right:10px;margin-bottom:10px;} 
.seled{border:1px solid red;background-color:#D6DFF7;position: relative;} 
.stretching{
    position: absolute;
    width:100%;
    height:100%;
    display:none;
}
.minSpan{
    position:absolute;
    width:8px;
    height:8px;
    background-color:green;
}
.up{
    left:50%;
    margin-left:-4px;
    top:-4px;
    cursor: n-resize;
}
.left-up{
    top:-4px;
    left:-4px;
    cursor: nw-resize;
}
.right-up{
   right:-4px;
   top:-4px;
   cursor: ne-resize;
}
.right{
    top:50%;
    margin-top:-4px;
    right:-4px;
    cursor: e-resize;
}
.right-down{
    bottom:-4px;
    right:-4px;
    cursor: se-resize;
}
.down{
    left:50%;
    margin-left:-4px;
    bottom:-4px;
    cursor: s-resize;
}
.left-down{
    left:-4px;
    bottom:-4px;
    cursor: sw-resize;
}
.left{
    bottom:50%;
    margin-bottom: -4px;
    left:-4px;
    cursor: w-resize;
}
.right-up{
    right:-4px;
    top:-4px;
    cursor: ne-resize;
}
.container{
    width:1000px;
    height: 800px;
    margin:10px 10px;
    border:1px solid #ccc;
}
#selectBox{
    position: absolute;
    width:100%;
    height:100%;
}
#addButton{
    width:100px;
    height:30px;
    position: absolute;
    bottom:-30px;
    border:1px solid greenyellow;
    background:palegoldenrod;
}
#addWord{
}
#textDetail{
    min-width: 20px ;
    max-width: 100px;
    overflow: auto;
    word-break: break-all;
   /* display:none; */
   position: absolute;
}
.addWord {
    position: absolute;
    width:100%;
    height:100%;
}
.content li{
   position: absolute;
   font-size: 15px;
   list-style-type: none;
}

参考该功能的实现：https://blog.csdn.net/ruixue0117/article/details/7075698

posted on 2018-08-17 18:00 Anby-PBH 阅读(153) 评论(0) 编辑收藏举报