jQuery版「エレメントドラッグでサイズ変更」jqueryドラッグでdomサイズ変更

2318 ワード

jQuery版「エレメントドラッグでサイズ変更」の原型で、マウスイベントのマウスの位置を計算し、計算した数値をdomの幅に再付与すればよいのが原理です.実は原生jsに変更できます.もちろん多くのプラグインができて、もっと便利です.しかし、このコードは長くないので、一時的に使うことができます.私が書いたのではなく、https://www.cnblogs.com/yelaiju/archive/2012/02/16/2354602.html


  
    
    jQuery  “        ”  
    
		
    
    
      $(function () {
        //               
				bindResize(document.getElementById("test"));
				console.log(document)
      });
      function bindResize(el) {
        //     
        var els = el.style,
          //    X   Y    
          x = (y = 0);
        //     
        $(el).mousedown(function (e) {
          //     ,               
          (x = e.clientX - el.offsetWidth), (y = e.clientY - el.offsetHeight);
          //    setCapture     
          el.setCapture
            ? //    
              (el.setCapture(),
              //    
              (el.onmousemove = function (ev) {
                mouseMove(ev || event);
              }),
              (el.onmouseup = mouseUp))
            : //    
              $(el).bind("mousemove", mouseMove).bind("mouseup", mouseUp);
          //        
          e.preventDefault();
        });
        //    
        function mouseMove(e) {
          //         ...
          (els.width = e.clientX - x + "px"),
            (els.height = e.clientY - y + "px");
        }
        //    
        function mouseUp() {
          //    releaseCapture     
          el.releaseCapture
            ? //    
              (el.releaseCapture(),
              //    
              (el.onmousemove = el.onmouseup = null))
            : //    
              $(el)
                .unbind("mousemove", mouseMove)
                .unbind("mouseup", mouseUp);
        }
      }