シンプルなドラッグアンドドロップのサポートページフレームズーム機能プラグインのjs

入門

少し前までは、上司は私に揚げ日ぶら下がって比較するタスクを割り当てられました。マウスで額縁に：私が達成したいです。また、ボックスの塗りつぶし、あなたはマウスでズームすることができ、ドラッグアンドドロップすることができることを意味、リサイズを達成することができます。私はまた、インタラクティブ実装する必要があり、この記事では、唯一のドラッグの原則について話して達成するために私をドロップするだけでなく、ビジネスの詳細のいくつかには言及しています。

最初のターゲットフレーム

需要も多くのボックスよりも描画するのに必要であるため、オブジェクト指向の考え方の使用を単にマウスイベントの場所にボックスを検出する場合、ユーザーはおそらく、ボックスの多くを描画します簡単ので、ズーム機能を障害につながるとドラッグすることができます、ドラッグ・アンド・ボックスをズームが対象となり、バインド他のすべてのマウスイベントは、このテーマにしています。

ADOは、直接ソースに、アイデアは非常に簡単です。

function newBox(options) {
    this.container = $('<div class="new_rect"></div>');
    this.dragLeft = $('<div class="new_react-left"><div class="dots"></div></div>');
    this.dragTop = $('<div class="new_react-top"><div class="dots"></div></div>');
    this.dragRight = $('<div class="new_react-right"><div class="dots"></div></div>');
    this.dragBottom = $('<div class="new_react-bottom"><div class="dots"></div></div>');
    this.dragTopLeft = $('<div class="new_react-dots new_react-top-left"></div>');
    this.dragTopRight = $('<div class="new_react-dots new_react-top-right"></div>');
    this.dragBottomLeft = $('<div class="new_react-dots new_react-bottom-left"></div>');
    this.dragBottomRight = $('<div class="new_react-dots new_react-bottom-right"></div>');
    this.sureBtn = $('<div class="sureBtn"></div>');
    this.cancelBtn = $('<div class="cancelBtn"></div>');
    this.enableEdit = true;
    this.init();
    this.options = options;
}

newBox.prototype = {
    init: function() {
        this.container.append(this.dragLeft);
        this.container.append(this.dragTop);
        this.container.append(this.dragRight);
        this.container.append(this.dragBottom);
        this.container.append(this.dragTopLeft);
        this.container.append(this.dragTopRight);
        this.container.append(this.dragBottomLeft);
        this.container.append(this.dragBottomRight);
        this.container.append(this.sureBtn);
        this.container.append(this.cancelBtn);

        this.container.on({
            'mousedown': this.containerMouseDown.bind(this),
            'click': this.enableEditFunc.bind(this)
          });
        this.dragRight.on('mousedown', this.dragRightMouseDown.bind(this));
        this.dragLeft.on('mousedown', this.dragLeftMouseDown.bind(this));
        this.dragTop.on('mousedown', this.dragTopMouseDown.bind(this));
        this.dragBottom.on('mousedown', this.dragBottomMouseDown.bind(this));
        this.dragTopLeft.on('mousedown', this.dragTopLeftMouseDown.bind(this));
        this.dragTopRight.on('mousedown', this.dragTopRightMouseDown.bind(this));
        this.dragBottomRight.on('mousedown', this.dragBottomRightMouseDown.bind(this));
        this.dragBottomLeft.on('mousedown', this.dragBottomLeftMouseDown.bind(this));

        this.sureBtn.on('click', this.sureFunc.bind(this));
        this.cancelBtn.on('click', this.cancelFunc.bind(this));
    },
    sureFunc: function() {
      this.disableEditFunc();
        if(this.options.sureFunc)
            this.options.sureFunc(this.container);
        return false;
    },
    cancelFunc: function() {
        this.container.remove();
        if(this.options.cancelFunc)
            this.options.cancelFunc(this.container);
    },
    enableEditFunc: function() {
        var sureBtn = this.sureBtn;
      
      // 设置正在编辑的框的zindex为最大
      this.container.css('z-index','100000000')

        // 先保存未保存的
        $('.new_rect .sureBtn').each(function() {
            if($(this)[0] == sureBtn[0]){
                return;
            }
        $(this).is(':visible') && $(this).click() && $(this).mouseleave();
      })

        this.enableEdit = true;
        this.container.find('.new_react-dots, .dots').show();
        this.sureBtn.show();
        this.cancelBtn.show();
    },
    disableEditFunc: function() {
      var width=this.container.width();
      var height=this.container.height();
      var area=parseInt(width*height);
      this.container.css('z-index',100000000-area);
        this.enableEdit = false;
        this.container.find('.new_react-dots, .dots').hide();
        this.sureBtn.hide();
        this.cancelBtn.hide();
    },
    setPosition: function(position) {
        this.container.css(position)
    },
    dragRightMouseDown: function(ev) {
      if(!this.enableEdit)
          return false;
      var rightElem = this.dragRight;
      var o_x = ev.pageX;
      var o_width = this.container.width();
      var o_right = parseFloat(this.container.css('right'));

      if(rightElem.setCapture) {
        rightElem.setCapture();
      }
      $(document).on("mousemove.dragRight", doDragRight.bind(this));
      $(document).on("mouseup.dragRight", stopDragRight.bind(this));

      return false;

      function doDragRight(e) {
        var right = o_right - e.pageX + o_x;
        if(right < 0)
            right = 0;
        if(right > o_width + o_right)
            right = o_width + o_right
        this.setPosition({
            right: right
        });
        return false;
        }
        function stopDragRight(e) {
        if(rightElem.releaseCapture) {
          rightElem.releaseCapture();
        }
        $(document).off("mousemove.dragRight");
        $(document).off("mouseup.dragRight");
        return false;
        }
    },
    dragLeftMouseDown: function(ev) {
      if(!this.enableEdit)
          return false;
      var leftElem = this.dragLeft;
      var o_x = ev.pageX;
      var o_width = this.container.width();
      var o_left = parseFloat(this.container.css('left'));

      if(leftElem.setCapture) {
        leftElem.setCapture();
      }
      $(document).on("mousemove.dragLeft", doDragLeft.bind(this));
      $(document).on("mouseup.dragLeft", stopDragLeft.bind(this));

      return false;

      function doDragLeft(e) {
        var left = o_left + e.pageX - o_x;
        if(left < 0)
            left = 0;
        if(left > o_width + o_left)
            left = o_width + o_left
        this.setPosition({
            left: left
        });
        return false;
        }
        function stopDragLeft(e) {
        if(leftElem.releaseCapture) {
          leftElem.releaseCapture();
        }
        $(document).off("mousemove.dragLeft");
        $(document).off("mouseup.dragLeft");
        return false;
        }
    },
    dragTopMouseDown: function(ev) {
      if(!this.enableEdit)
          return false;
      var topElem = this.dragTop;
      var o_y = ev.pageY;
      var o_height = this.container.height();
      var o_top = parseFloat(this.container.css('top'));

      if(topElem.setCapture) {
        topElem.setCapture();
      }
      $(document).on("mousemove.dragTop", doDragTop.bind(this));
      $(document).on("mouseup.dragTop", stopDragTop.bind(this));

      return false;

      function doDragTop(e) {
        var top = o_top + e.pageY - o_y;
        if(top < 0)
            top = 0;
        if(top > o_top + o_height)
            top = o_top + o_height
        this.setPosition({
          top: top
        });
        return false;
        }
        function stopDragTop(e) {
        if(topElem.releaseCapture) {
          topElem.releaseCapture();
        }
        $(document).off("mousemove.dragTop");
        $(document).off("mouseup.dragTop");
        return false;
        }
    },
    dragBottomMouseDown: function(ev) {
      if(!this.enableEdit)
          return false;
      var bottomElem = this.dragBottom;
      var o_y = ev.pageY;
      var o_height = this.container.height();
      var o_bottom = parseFloat(this.container.css('bottom'));

      if(bottomElem.setCapture) {
        bottomElem.setCapture();
      }
      $(document).on("mousemove.dragBottom", doDragBottom.bind(this));
      $(document).on("mouseup.dragBottom", stopDragBottom.bind(this));

      return false;

      function doDragBottom(e) {
        var bottom = o_bottom - e.pageY + o_y;
        if(bottom < 0)
            bottom = 0;
        if(bottom > o_bottom + o_height)
            bottom = o_bottom + o_height
        this.setPosition({
          bottom: bottom
        });
        return false;
        }
        function stopDragBottom(e) {
        if(bottomElem.releaseCapture) {
          bottomElem.releaseCapture();
        }
        $(document).off("mousemove.dragBottom");
        $(document).off("mouseup.dragBottom");
        return false;
        }
    },
    dragTopLeftMouseDown: function(ev) {
        if(!this.enableEdit)
          return false;
      var topLeftElem = this.dragTopLeft;
      var o_y = ev.pageY;
      var o_x = ev.pageX;
      var o_height = this.container.height();
      var o_width = this.container.width();
      var o_top = parseFloat(this.container.css('top'));
      var o_left = parseFloat(this.container.css('left'));

      if(topLeftElem.setCapture) {
        topLeftElem.setCapture();
      }
      $(document).on("mousemove.dragTopLeft", doDragTopLeft.bind(this));
      $(document).on("mouseup.dragTopLeft", stopDragTopLeft.bind(this));

      return false;

      function doDragTopLeft(e) {
        var top = o_top + e.pageY - o_y;
        var left = o_left + e.pageX - o_x;
        if(top < 0)
            top = 0;
        if(top > o_top + o_height)
            top = o_top + o_height;

        if(left < 0)
            left = 0;
        if(left > o_width + o_left)
            left = o_width + o_left;

        this.setPosition({
          top: top,
          left: left
        });
        return false;
        }
        function stopDragTopLeft(e) {
        if(topLeftElem.releaseCapture) {
          topLeftElem.releaseCapture();
        }
        $(document).off("mousemove.dragTopLeft");
        $(document).off("mouseup.dragTopLeft");
        return false;
        }
    },
    dragTopRightMouseDown: function(ev) {
        if(!this.enableEdit)
          return false;
      var topRightElem = this.dragTopRight;
      var o_y = ev.pageY;
      var o_x = ev.pageX;
      var o_height = this.container.height();
      var o_width = this.container.width();
      var o_top = parseFloat(this.container.css('top'));
      var o_right = parseFloat(this.container.css('right'));

      if(topRightElem.setCapture) {
        topRightElem.setCapture();
      }
      $(document).on("mousemove.dragTopRight", doDragTopRight.bind(this));
      $(document).on("mouseup.dragTopRight", stopDragTopRight.bind(this));

      return false;

      function doDragTopRight(e) {
        var top = o_top + e.pageY - o_y;
        var right = o_right - e.pageX + o_x;
        if(top < 0)
            top = 0;
        if(top > o_top + o_height)
            top = o_top + o_height;

        if(right < 0)
            right = 0;
        if(right > o_width + o_right)
            right = o_width + o_right;

        this.setPosition({
          top: top,
          right: right
        });
        return false;
        }
        function stopDragTopRight(e) {
        if(topRightElem.releaseCapture) {
          topRightElem.releaseCapture();
        }
        $(document).off("mousemove.dragTopRight");
        $(document).off("mouseup.dragTopRight");
        return false;
        }
    },
    dragBottomRightMouseDown: function(ev) {
        if(!this.enableEdit)
          return false;
      var bottomRightElem = this.dragBottomRight;
      var o_y = ev.pageY;
      var o_x = ev.pageX;
      var o_height = this.container.height();
      var o_width = this.container.width();
      var o_bottom = parseFloat(this.container.css('bottom'));
      var o_right = parseFloat(this.container.css('right'));

      if(bottomRightElem.setCapture) {
        bottomRightElem.setCapture();
      }
      $(document).on("mousemove.dragBottomRight", doDragTopRight.bind(this));
      $(document).on("mouseup.dragBottomRight", stopDragTopRight.bind(this));

      return false;

      function doDragTopRight(e) {
        var bottom = o_bottom - e.pageY + o_y;
        var right = o_right - e.pageX + o_x;
        if(bottom < 0)
            bottom = 0;
        if(bottom > o_bottom + o_height)
            bottom = o_bottom + o_height;

        if(right < 0)
            right = 0;
        if(right > o_width + o_right)
            right = o_width + o_right;

        this.setPosition({
          bottom: bottom,
          right: right
        });
        return false;
        }
        function stopDragTopRight(e) {
        if(bottomRightElem.releaseCapture) {
          bottomRightElem.releaseCapture();
        }
        $(document).off("mousemove.dragBottomRight");
        $(document).off("mouseup.dragBottomRight");
        return false;
        }
    },
    dragBottomLeftMouseDown: function(ev) {
        if(!this.enableEdit)
          return false;
      var bottomLeftElem = this.dragBottomLeft;
      var o_y = ev.pageY;
      var o_x = ev.pageX;
      var o_height = this.container.height();
      var o_width = this.container.width();
      var o_bottom = parseFloat(this.container.css('bottom'));
      var o_left = parseFloat(this.container.css('left'));

      if(bottomLeftElem.setCapture) {
        bottomLeftElem.setCapture();
      }
      $(document).on("mousemove.dragBottomLeft", doDragTopLeft.bind(this));
      $(document).on("mouseup.dragBottomLeft", stopDragTopLeft.bind(this));

      return false;

      function doDragTopLeft(e) {
        var bottom = o_bottom - e.pageY + o_y;
        var left = o_left + e.pageX - o_x;
        if(bottom < 0)
            bottom = 0;
        if(bottom > o_bottom + o_height)
            bottom = o_bottom + o_height;

        if(left < 0)
            left = 0;
        if(left > o_width + o_left)
            left = o_width + o_left;

        this.setPosition({
          bottom: bottom,
          left: left
        });
        return false;
        }
        function stopDragTopLeft(e) {
        if(bottomLeftElem.releaseCapture) {
          bottomLeftElem.releaseCapture();
        }
        $(document).off("mousemove.dragBottomLeft");
        $(document).off("mouseup.dragBottomLeft");
        return false;
        }
    },
    containerMouseDown: function(ev) {
            if(!this.enableEdit)
          return false;
            var o_x = ev.pageX;
      var o_y = ev.pageY;
      var containerWidth = this.container.width();
      var containerHeight = this.container.height();

      var o_top = parseFloat(this.container.css('top'));
      var o_left = parseFloat(this.container.css('left'));
      var o_right = parseFloat(this.container.css('right'));
      var o_bottom = parseFloat(this.container.css('bottom'));

      if(this.container.setCapture) {
        this.container.setCapture();
      }
      $(document).on("mousemove.container", doDrag.bind(this));
      $(document).on("mouseup.container", stopDrag.bind(this));
      return false;

      function doDrag(e) {
                var disY = e.pageY - o_y;
            var disX = e.pageX - o_x;
        var top = o_top + disY;
        var left = o_left + disX;
        var right = o_right - disX;
        var bottom = o_bottom - disY;

        if(top < 0)  {
            top = 0;
            bottom = o_bottom + o_top;
        }
        if(bottom < 0) {
            bottom = 0;
            top = o_top + o_bottom;
        }
        if(left < 0) {
            left = 0;
            right = o_right + o_left;
        }
        if(right < 0) {
            right = 0;
            left = o_right + o_left;
        }

        this.setPosition({top: top, bottom: bottom, left: left, right: right});
        return false;
            }

            function stopDrag(ev) {
                if(this.container.releaseCapture) {
            this.container.releaseCapture();
          }
        $(document).off("mousemove.container");
        $(document).off("mouseup.container");
          return false;
          }
        }
}

この時点で、サポートズームとドラッグとボックスオブジェクトが作成されたが、まだ実際には、最初のフレーム機能を実装していない、最初のボックスのアイデアは、より簡単な描画されたドロップ、ときにマウスのxにマウスダウン、y座標とのmouseup記録されていますマウスのx、y座標、及び座標値、及びその上に位置する新しいDIVの幅と高さを設定します。ここで私はjQueryプラグインにそれを指示し、ソースコードです。

$.fn.draw_drag_test = function(options) {
    var position = {}
    var elemWidth, elemHeight, o_x, o_y, d_x, d_y, rect, o_left, o_top;

    var mouseDown = function(e) {
      $(this).on({
        'mousemove': mouseMove,
        'mouseup': mouseUp
      })

      var elemLeft = $(this).offset().left,
          elemTop = $(this).offset().top;

      elemWidth = $(this).width();
      elemHeight = $(this).height();
      o_x = e.pageX;
      o_y = e.pageY;

      position.left = o_left = o_x - elemLeft;
      position.top = o_top = o_y - elemTop;

      rect = new newBox(options);
      rect.container.css('z-index','100000000');
      $(this).append(rect.container);

    }

    var mouseMove = function(e) {
      var m_x = e.pageX,
          m_y = e.pageY;

      d_x = m_x - o_x;
      d_y = m_y - o_y;

      position.right = elemWidth - position.left - d_x;
      position.bottom = elemHeight - position.top - d_y;

      if(d_x < 0) {
          position.right = elemWidth - o_left;
          position.left = o_left + d_x;
      }else {
          position.left = o_left;
      }

      if(d_y < 0) {
          position.bottom = elemHeight - o_top;
          position.top = o_top + d_y;
      }else {
          position.top = o_top;
      }

      rect.setPosition(position);
    }

    var mouseUp = function(e) {
      $(this).off('mouseup', mouseUp);
      $(this).off('mousemove', mouseMove);
      $(this).off('mousedown', mouseDown);
    }

    return this.each(function() {
      $(this).off('mousedown').on({
        'mousedown': mouseDown
      })
      return this;
    })

}

実際には、ここで私たちは見ることができ、オブジェクト指向のメカニズムのおかげで、我々はいくつかの非常に簡単なドラッグ＆ドロップフレームを達成することができます。そして、この方法はまた、さまざまなビジネスニーズに応じていくつかの相互作用を容易にするために、コールバックインタフェースを残しました。