本文例項為大家分享了jQuery實現容器間的元素拖拽，供大家參考，具體內容如下

在html中準備三個容器

<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中，給容器寫上樣式相應的樣式

.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的標籤中，開始寫js程式碼。

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

 //拖拽
 var drag = {
 class_name: null,//允許放置的容器
 permitDrag: false,//是否允許移動標識
 _x: 0,//節點x座標
 _y: 0,//節點y座標
 _left: 0,//游標與節點座標的距離
 _top: 0,//游標與節點座標的距離
 old_elm: null,//拖拽原節點
 tmp_elm: null,//跟隨游標移動的臨時節點
 new_elm: null,//拖拽完成後新增的新節點
 //初始化
 init: function(className) {
  //允許拖拽節點的父容器的classname(可按照需要，修改為id或其他)
  drag.class_name = className;
  //監聽滑鼠按下事件，動態繫結要拖拽的節點（因為節點可能是動態新增的）
  $('.' + drag.class_name).on('mousedown','ul li',function(event) {
  //當在允許拖拽的節點上監聽到點選事件，將標識設定為可以拖拽
  drag.permitDrag = true;
  //獲取到拖拽的原節點物件
  drag.old_elm = $(this);
  //執行開始拖拽的操作
  drag.mousedown(event);
  return false;
  });

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

  //監聽滑鼠放開
  $(document).mouseup(function(event) {
  //判斷拖拽標識是否為允許，否則不進行操作
  if (!drag.permitDrag) return false;
  //拖拽結束後恢復標識到初始狀態
  drag.permitDrag = false;
  //執行拖拽結束後的操作
  drag.mouseup(event);
  return false;
  });
 },//按下滑鼠 執行的操作
 mousedown: function(event) {

  //1.克隆臨時節點，跟隨滑鼠進行移動
  drag.tmp_elm = $(drag.old_elm).clone();

  //2.計算 節點 和 游標 的座標
  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.修改克隆節點的座標，實現跟隨滑鼠進行移動的效果
  $(drag.tmp_elm).css({
  'position': 'absolute','background-color': '#FF8C69','left': drag._x,'top': drag._y,});

  //4.新增臨時節點
  tmp = $(drag.old_elm).parent().append(drag.tmp_elm);
  drag.tmp_elm = $(tmp).find(drag.tmp_elm);
  $(drag.tmp_elm).css('cursor','move');

 },//移動滑鼠 執行的操作
 mousemove: function(event) {

  //2.計算座標
  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.修改克隆節點的座標
  $(drag.tmp_elm).css({
  'left': x,'top': y,});

  //判斷當前容器是否允許放置節點
  $.each($('.' + drag.class_name + ' ul'),function(index,value) {

  //獲取容器的座標範圍 (區域)
  var box_x = $(value).offset().left; //容器左上角x座標
  var box_y = $(value).offset().top; //容器左上角y座標
  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) {
  //判斷是否不在原來的容器下（使用座標進行判斷：x、y任意一個座標不等於原座標，則表示不是原來的容器）
  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 {
  //恢復容器原背景色
  $(value).css('background-color','#FFFFF0');
  }
  });
 },//放開滑鼠 執行的操作
 mouseup: function(event) {
  //移除臨時節點
  $(drag.tmp_elm).remove();
  //判斷所在區域是否允許放置節點
  var e = event || window.event;
  $.each($('.' + drag.class_name + ' ul'),value) {
  //獲取容器的座標範圍 (區域)
  var box_x = $(value).offset().left; //容器左上角x座標
  var box_y = $(value).offset().top; //容器左上角y座標
  var box_width = $(value).outerWidth(); //容器寬
  var box_height = $(value).outerHeight(); //容器高
  //判斷放開滑鼠位置是否想允許放置的容器範圍內
  if (e.pageX > box_x && e.pageX < box_x - 0 + box_width && e.pageY > box_y && e.pageY < box_y - 0 + box_height) {
  //判斷是否不在原來的容器下（使用座標進行判斷：x、y任意一個座標不等於原座標，則表示不是原來的容器）
  if ($(value).offset().left !== drag.old_elm.parent().offset().left ||
  $(value).offset().top !== drag.old_elm.parent().offset().top) {
  //向目標容器新增節點並刪除原節點
  tmp = $(drag.old_elm).clone();
  var newObj = $(value).append(tmp);
  $(drag.old_elm).remove();
  //獲取新新增節點的物件
  drag.new_elm = $(newObj).find(tmp);
  }
  }
  //恢復容器原背景色
  $(value).css('background-color','#FFFFF0');
  });

 },};
</script>

最後實現的效果如下：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。