jQuery uses drag effect to realize free dragging div

jQuery uses drag effect to realize free dragging div_jquery

WBOY

Release： 2016-05-16 15:55:34

Original

1396 people have browsed it

I accidentally saw a simple div drag effect that I made before. I modified it and added some comments. After testing, it passed firefox/chrome/ie6-11 perfectly. Now I will share it.

First let’s talk about the implementation principles and key points. The most important are three steps. The first step is the mousedown event. When the mouse is mousedown, the X-axis and Y-axis of the mouse as well as the left and top of the drag box are recorded, and a value of true is assigned to the drag mark, which means that the drag action is ready. The second step is the mousemove event. At this time, the X-axis and Y-axis of the mouse are dynamically obtained, and then the new left and top of the drag box are calculated and assigned to achieve the drag effect. The third step is the mouseup event. When the mouse bounces up, the drag flag is assigned a value of false, and the drag action is completed.

The html code is as follows:

<div class="divWrap" id="move1" style="width: 200px; height: 200px; background: Green; border: 1px solid red; position: absolute; top: 100px; left: 100px; cursor: move; -moz-user-select: none; -webkit-user-select: none;"></div>
<div class="divWrap" style="width: 200px; height: 200px; background: brown; border: 1px solid red; position: absolute; top: 300px; left: 100px;">
  <h3 id="move2" style="height: 45px; line-height: 45px; font-size: 18px; background: red; margin: 0; cursor: move; -moz-user-select: none; -webkit-user-select: none;">Title--Move</h3>
</div>

Copy after login

js code is as follows:

(function($) {
  $.fn.dragDiv = function(divWrap) {
    return this.each(function() {
      var $divMove = $(this);//鼠标可拖拽区域
      var $divWrap = divWrap &#63; $divMove.parents(divWrap) : $divMove;//整个移动区域
      var mX = 0, mY = 0;//定义鼠标X轴Y轴
      var dX = 0, dY = 0;//定义div左、上位置
      var isDown = false;//mousedown标记
      if(document.attachEvent) {//ie的事件监听，拖拽div时禁止选中内容，firefox与chrome已在css中设置过-moz-user-select: none; -webkit-user-select: none;
        $divMove[0].attachEvent('onselectstart', function() {
          return false;
        });
      }
      $divMove.mousedown(function(event) {
        var event = event || window.event;
        mX = event.clientX;
        mY = event.clientY;
        dX = $divWrap.offset().left;
        dY = $divWrap.offset().top;
        isDown = true;//鼠标拖拽启动
      });
      $(document).mousemove(function(event) {
        var event = event || window.event;
        var x = event.clientX;//鼠标滑动时的X轴
        var y = event.clientY;//鼠标滑动时的Y轴
        if(isDown) {
          $divWrap.css({"left": x - mX + dX, "top": y - mY + dY});//div动态位置赋值
        }
      });
      $divMove.mouseup(function() {
        isDown = false;//鼠标拖拽结束
      });
    });
  };
})(jQuery);
//
$(document).ready(function() {
  $("#move1").dragDiv();//拖拽整个div
  $("#move2").dragDiv(".divWrap");//拖拽div头部
});

Copy after login

Finally, it is necessary to prohibit selecting content before starting the dragging action, otherwise the dragging effect will be affected. Firefox and Chrome can be set through CSS: {-moz-user-select: none; -webkit-user-select: none;}. IE can also write an onselectstart="return false" directly in HTML, but it seems that Chrome I was a little affected, so I decided to cancel this writing method, and then write an onselectstart event in js for the IE browser.

This small plug-in simply implements the drag-and-drop effect, but it has good compatibility and also uses some knowledge and skills. Of course, you can also use this plug-in or the ideas inside to continue to expand and write a more complete drag-and-drop plug-in (such as Draggable and Droppable).

The above is the entire content of this article, I hope you all like it.