jQuery实现容器间的元素拖拽功能

本文实例为大家分享了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'), 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 - 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>

最后实现的效果如下:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • jQuery实现拖拽页面元素并将其保存到cookie的方法

    本文实例讲述了jQuery实现拖拽页面元素并将其保存到cookie的方法.分享给大家供大家参考,具体如下: 实现的效果就是页面内的图片可拖拽到任意位置,并将所在位置保存.下次打开页面依然可见.本文是作demo用,实际开发中,位置的数据应保存到数据库中 好了,开始 1.准备工作 a.jquery(1.7.2),ui,cookie插件,json插件.一些图片(本文是5张) 2.页面 上代码 <div class="img_list" id="img_list"&g

  • JQuery拖拽元素改变大小尺寸实现代码

    "元素拖拽改变大小"其实和"元素拖拽"一个原理,只是所动态改变的对象不同而已,主要在于 top.left.width.height 的运用,相对实现起来也非常容易.以下附出源码原型,弄明白了原理再扩展其他实际应用,思路就变得简单.清晰得多了 下面是 JavaScript Code 复制代码 代码如下: <script type="text/javascript"> /* * jQuery.Resize by wuxinxi007 *

  • Jquery UI实现一次拖拽多个选中的元素操作

    项目需要,实现一个拖放操作,要求每次可以拖拽选中的多个元素,释放到目标容器后可排序.考虑了一下,觉得jquery-ui比较合适,毕竟它提供了项目需要的交互性事件机制.拖拽.释放.排序.选择等效果.而在实际的操作中,遇到个很多的问题,说明一下,最后附上效果图和代码. 1.本人使用的bootstrap框架,引入jquery-ui后,为元素添加拖拽方法后,提示该方法不是一个函数.查找原因,是bootstrap和jquery-uide的$ 标识符控制权冲突.在引入的jquery-ui的js前加上一下语句

  • jQuery实现元素拖拽并cookie保存顺序的方法

    本文实例讲述了jQuery实现元素拖拽并cookie保存顺序的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&

  • jQuery 版元素拖拽原型代码

    本文主要针对拖拽原型进行解析,给刚接触 JQuery 的爱好者一个简单的示例.在引入 Jquery.js 后: 复制代码 代码如下: <script type="text/javascript"> $(function(){ //绑定拖动元素对象 bindDrag(document.getElementById('test')); }); function bindDrag(el){ //初始化参数 var els = el.style, //鼠标的 X 和 Y 轴坐标 x

  • 分享jQuery网页元素拖拽插件

    效果说明:配合已有CSS样式,载入插件后,网页元素可以随意在窗口内拖拽,设置了原位置半透明和拖拽半透明的效果选项,可根据需要选择.另外,当页面上有多个可拖拽元素时,可以载入另外一个用于设置z-index的插件,模拟Windows窗口点击置顶效果. js/jquery.jLdraggable.js: ;(function($){ $.fn.extend({ "jLzindex" : function(){ //用于判断和设置各个对话框的z-index var $dragIndex = $

  • 基于jquery实现的鼠标拖拽元素复制并写入效果

    直接上代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eq

  • jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)

    本文实例讲述了jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法.分享给大家供大家参考,具体如下: 该插件是文章作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被拖拽元素的最小宽高和最大宽高.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E

  • jquery网页元素拖拽插件效果及实现

    复制代码 代码如下: ;(function($){$.fn.extend({"jlzindex" : function(){ //用于判断和设置各个对话框的z-indexvar $dragindex = $(this);var arrzindex = new array();for(var i=0; i < $dragindex.length; i++){ //初始化数组元素值,并按拖拽项顺序设置z-index值var zidxnum = 10000 - i - i -2;arr

  • jQuery实现html元素拖拽

    代码很简单,效果非常棒,直接给大家上源码: html <div> <div class="money-input"> 定投金额 : <div class="input-rela"> <input type="text" placeholder="2000"/> <span>元</span> </div> </div> <div

随机推荐