欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2020年12月01日 09:33:09   作者：shadow_yi_0416  
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)容器間的元素拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

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

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

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

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

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

  //2.計算 節(jié)點 和 光標 的坐標
  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é)點的坐標，實現(xiàn)跟隨鼠標進行移動的效果
  $(drag.tmp_elm).css({
  'position': 'absolute',
  'background-color': '#FF8C69',
  'left': drag._x,
  'top': drag._y,
  });

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

 },

 //移動鼠標 執(zhí)行的操作
 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.修改克隆節(jié)點的坐標
  $(drag.tmp_elm).css({
  'left': x,
  'top': y,
  });

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

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

 },

 };
</script>

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

最新評論