Dynamic layout - drag adjust the width

Appears in the project requirements, require dynamic adjustment of the size of each block for easy scaling to view the information, the following is to achieve a dynamic adjustment of the width (the height of the follow-up will make up)
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      html,body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      .flex-dragable {
        display: flex;
      }
      .flex-row {
        height: 80%;
        display: flex;
        flex-direction: column;
      }
      .flex-item {
        flex: 1 1 100%;
        padding: 15px;
        margin: 5px;
        border: 1px solid #a3a3a3;
        overflow: auto;
      }
      .flex-row-item {
        flex: 1 1 100%;
      }
    </style>
  </head>
  <body>
    <div class="flex-row">
      <div class="flex-dragable flex-row-item">
        <div class="flex-item">
          content 1 ...
        </div>
        <div class="flex-item">
          content 2 ...
        </div>
        <div class="flex-item">
          content - ...
        </div>
      </div>
      <div class="flex-dragable flex-row-item">
        <div class="flex-item">
          content 3 ...
        </div>
        <div class="flex-item">
          content 4 ...
        </div>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    var items = document.querySelectorAll('.flex-dragable');

    Array.from(items).map(function(item){
      dragablize(item);
    });

    /**
    * 初始化拖拽
    **/
    function dragablize(ctn) {
      var items = ctn.querySelectorAll('.flex-item'), lastX;

      Array.from(items).map(function(item){
        item.onmousedown = function(event) {
          var target = getTarget(event),
              prevItem = target.previousElementSibling,
              suffItem = target.nextElementSibling;

          lastX = event.clientX;
          if (suffItem && (event.offsetX > this.offsetWidth - 10)) {
            item.mouseDown = true;
            item.oldX = event.x;
            item.oldWidth = item.offsetWidth;
          }else if(prevItem && (event.offsetX < 10)) {//When the left drag pre-set the width of the actual element 
            var EVT = newMouseEvent (Event, ' mouseDown ' ); 
            prevItem.dispatchEvent (EVT); 
          } 
        }; 

        item.onmouseup =  function (Event) {
           var target = the getTarget (Event) , 
              prevItem = target.previousElementSibling; 

          item.mouseDown =  to false ; 
          item.style.cursor =  '' ; 
          lastX =  null ; 

          IF (prevItem) {// trigger element front left drag mouseup, to avoid an abnormal response 
            var EVT = newMouseEvent (Event, ' mouseUp ' ); 
            prevItem.dispatchEvent (EVT); 
          } 
        }; 
      }); 

      ctn.onmousemove =  function (Event) {
         var target = the getTarget (Event);
         IF (Array.from (items) .includes (target)) {
           var prevItem = target.previousElementSibling, 
              suffItem = target.nextElementSibling, 
              direction =event.clientX - lastX; 

          / * * 
          * mouse style change 
          * 1: left and right sides of the intermediate element can drag the pattern (when the left drag pre-set the actual width of the element) 
          * 2: not only the front element the right drag style 
          * 3: no rear element is only dragged left style 
          * * / 
          IF (suffItem && (event.offsetX > target.offsetWidth -  10 )
               || prevItem && (event.offsetX <  10 )) { 
            target.style.cursor =  ' COL-a resize ' ; 
          } the else { 
            target.style.cursor= '';
          }

          //调整宽度
          var item = getClickedTarget(items);
          if(item && item.mouseDown && direction) {
            setWidth(item,direction);
            lastX = event.clientX;
          }
        }
      };

      function setWidth(item,offset) {
        var style = getComputedStyle(item),
            width = style.width.replace('px','')-0;
         // maxWidth, minWidth prevent flex layout width calculation impact 
        item.style.width = width + offset +  ' PX ' ; 
        item.style.maxWidth = width + offset +  ' PX ' ; 
        item.style.minWidth = width + offset +  ' PX ' ; 
      } 
    } 

    function the addListener (Element, type, listener, with useCapture) { 
        element.addEventListener ?element.addEventListener(type,listener,useCapture):element.attachEvent("on" + type,listener);
    }
    function getTarget(evt){
        return evt.target || evt.srcElement;
    }
    function getClickedTarget(items){
        var t;
        Array.from(items).map(function(item){
          if(item.mouseDown == true) t = item;
        });
        return t;
    }
    /**
     * 创建鼠标事件
     **/
    function newMouseEvent(event,eventType){
        var clientX = event.clientX,clientY=event.clientY,screenX=event.screenX,screenY=event.screenY;

        var simEvent = new MouseEvent(eventType,{clientX:clientX,clientY:clientY,screenX:screenX,screenY:screenY});
        return simEvent;
    }
  </script>
</html>
Dynamic layout - drag adjust the width

Guess you like
