jQuery實(shí)現(xiàn)容器間的元素拖拽功能

更新時間：2020年12月01日 09:33:09 作者：shadow_yi_0416

這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)容器間的元素拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)容器間的元素拖拽，供大家參考，具體內(nèi)容如下

在html中準(zhǔn)備三個容器

<div class="container">
 <ul>
 <li>A</li>
 <li>B</li>
 <li>C</li>
 <li>e</li>
 <li>f</li>
 <li>g</li>
 </ul>
 <ul></ul>
 <ul></ul>
</div>

在css中，給容器寫上樣式相應(yīng)的樣式

.container ul{
 width: 350px;
 padding: 15px;
 min-height:300px;
 background-color:#FFFFF0;
 margin:20px;
 display: inline-block;
 border-radius: 5px;
 border: 1px solid #C6C8CA;
 }
 .container ul li{
 display: block;
 float: left;
 width: 350px;
 height: 35px;
 line-height: 35px;
 border-radius: 4px;
 margin: 0;
 padding: 0;
 list-style: none;
 background-color:yellow;
 margin-bottom:10px;
 -moz-user-select: none;
 user-select: none;
 text-indent: 10px;
 color: #555;
}

js代碼

首先引用jquery的js文件

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>

在script的標(biāo)簽中，開始寫js代碼。

<script type="text/javascript">
 $(function() {
 // 初始化容器
 drag.init('container');
 });

 //拖拽
 var drag = {
 class_name: null, //允許放置的容器
 permitDrag: false, //是否允許移動標(biāo)識
 _x: 0, //節(jié)點(diǎn)x坐標(biāo)
 _y: 0, //節(jié)點(diǎn)y坐標(biāo)
 _left: 0, //光標(biāo)與節(jié)點(diǎn)坐標(biāo)的距離
 _top: 0, //光標(biāo)與節(jié)點(diǎn)坐標(biāo)的距離
 old_elm: null, //拖拽原節(jié)點(diǎn)
 tmp_elm: null, //跟隨光標(biāo)移動的臨時節(jié)點(diǎn)
 new_elm: null, //拖拽完成后添加的新節(jié)點(diǎn)
 //初始化
 init: function(className) {
  //允許拖拽節(jié)點(diǎn)的父容器的classname(可按照需要，修改為id或其他)
  drag.class_name = className;
  //監(jiān)聽鼠標(biāo)按下事件，動態(tài)綁定要拖拽的節(jié)點(diǎn)（因?yàn)楣?jié)點(diǎn)可能是動態(tài)添加的）
  $('.' + drag.class_name).on('mousedown', 'ul li', function(event) {
  //當(dāng)在允許拖拽的節(jié)點(diǎn)上監(jiān)聽到點(diǎn)擊事件，將標(biāo)識設(shè)置為可以拖拽
  drag.permitDrag = true;
  //獲取到拖拽的原節(jié)點(diǎn)對象
  drag.old_elm = $(this);
  //執(zhí)行開始拖拽的操作
  drag.mousedown(event);
  return false;
  });

  //監(jiān)聽鼠標(biāo)移動
  $(document).mousemove(function(event) {
  //判斷拖拽標(biāo)識是否為允許，否則不進(jìn)行操作
  if (!drag.permitDrag) return false;
  //執(zhí)行移動的操作
  drag.mousemove(event);
  return false;
  });

  //監(jiān)聽鼠標(biāo)放開
  $(document).mouseup(function(event) {
  //判斷拖拽標(biāo)識是否為允許，否則不進(jìn)行操作
  if (!drag.permitDrag) return false;
  //拖拽結(jié)束后恢復(fù)標(biāo)識到初始狀態(tài)
  drag.permitDrag = false;
  //執(zhí)行拖拽結(jié)束后的操作
  drag.mouseup(event);
  return false;
  });
 },

 //按下鼠標(biāo) 執(zhí)行的操作
 mousedown: function(event) {

  //1.克隆臨時節(jié)點(diǎn)，跟隨鼠標(biāo)進(jìn)行移動
  drag.tmp_elm = $(drag.old_elm).clone();

  //2.計算 節(jié)點(diǎn) 和 光標(biāo) 的坐標(biāo)
  drag._x = $(drag.old_elm).offset().left;
  drag._y = $(drag.old_elm).offset().top;

  var e = event || window.event;
  drag._left = e.pageX - drag._x;
  drag._top = e.pageY - drag._y;

  //3.修改克隆節(jié)點(diǎn)的坐標(biāo)，實(shí)現(xiàn)跟隨鼠標(biāo)進(jìn)行移動的效果
  $(drag.tmp_elm).css({
  'position': 'absolute',
  'background-color': '#FF8C69',
  'left': drag._x,
  'top': drag._y,
  });

  //4.添加臨時節(jié)點(diǎn)
  tmp = $(drag.old_elm).parent().append(drag.tmp_elm);
  drag.tmp_elm = $(tmp).find(drag.tmp_elm);
  $(drag.tmp_elm).css('cursor', 'move');

 },

 //移動鼠標(biāo) 執(zhí)行的操作
 mousemove: function(event) {

  //2.計算坐標(biāo)
  var e = event || window.event;
  var x = e.pageX - drag._left;
  var y = e.pageY - drag._top;
  var maxL = $(document).width() - $(drag.old_elm).outerWidth();
  var maxT = $(document).height() - $(drag.old_elm).outerHeight();
  //不允許超出瀏覽器范圍
  x = x < 0 ? 0 : x;
  x = x > maxL ? maxL : x;
  y = y < 0 ? 0 : y;
  y = y > maxT ? maxT : y;

  //3.修改克隆節(jié)點(diǎn)的坐標(biāo)
  $(drag.tmp_elm).css({
  'left': x,
  'top': y,
  });

  //判斷當(dāng)前容器是否允許放置節(jié)點(diǎn)
  $.each($('.' + drag.class_name + ' ul'), function(index, value) {

  //獲取容器的坐標(biāo)范圍 (區(qū)域)
  var box_x = $(value).offset().left; //容器左上角x坐標(biāo)
  var box_y = $(value).offset().top; //容器左上角y坐標(biāo)
  var box_width = $(value).outerWidth(); //容器寬
  var box_height = $(value).outerHeight(); //容器高

  //給可以放置的容器加背景色
  if (e.pageX > box_x && e.pageX < box_x + box_width && e.pageY > box_y && e.pageY < box_y + box_height) {
  //判斷是否不在原來的容器下（使用坐標(biāo)進(jìn)行判斷：x、y任意一個坐標(biāo)不等于原坐標(biāo)，則表示不是原來的容器）
  if ($(value).offset().left !== drag.old_elm.parent().offset().left ||
  $(value).offset().top !== drag.old_elm.parent().offset().top) {

  $(value).css('background-color', '#FFEFD5');
  }
  } else {
  //恢復(fù)容器原背景色
  $(value).css('background-color', '#FFFFF0');
  }
  });
 },
 //放開鼠標(biāo) 執(zhí)行的操作
 mouseup: function(event) {
  //移除臨時節(jié)點(diǎn)
  $(drag.tmp_elm).remove();
  //判斷所在區(qū)域是否允許放置節(jié)點(diǎn)
  var e = event || window.event;
  $.each($('.' + drag.class_name + ' ul'), function(index, value) {
  //獲取容器的坐標(biāo)范圍 (區(qū)域)
  var box_x = $(value).offset().left; //容器左上角x坐標(biāo)
  var box_y = $(value).offset().top; //容器左上角y坐標(biāo)
  var box_width = $(value).outerWidth(); //容器寬
  var box_height = $(value).outerHeight(); //容器高
  //判斷放開鼠標(biāo)位置是否想允許放置的容器范圍內(nèi)
  if (e.pageX > box_x && e.pageX < box_x - 0 + box_width && e.pageY > box_y && e.pageY < box_y - 0 + box_height) {
  //判斷是否不在原來的容器下（使用坐標(biāo)進(jìn)行判斷：x、y任意一個坐標(biāo)不等于原坐標(biāo)，則表示不是原來的容器）
  if ($(value).offset().left !== drag.old_elm.parent().offset().left ||
  $(value).offset().top !== drag.old_elm.parent().offset().top) {
  //向目標(biāo)容器添加節(jié)點(diǎn)并刪除原節(jié)點(diǎn)
  tmp = $(drag.old_elm).clone();
  var newObj = $(value).append(tmp);
  $(drag.old_elm).remove();
  //獲取新添加節(jié)點(diǎn)的對象
  drag.new_elm = $(newObj).find(tmp);
  }
  }
  //恢復(fù)容器原背景色
  $(value).css('background-color', '#FFFFF0');
  });

 },

 };
</script>

最后實(shí)現(xiàn)的效果如下：