利用jQuery实现简单的拖曳效果实例代码
前言
本文主要给大家介绍了一种利用jQuery实现的简单拖曳效果，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。
提出问题
如何实现将一个盒子里的元素拉到另外一个盒子里？
实现思路
- 此操作包含的事件有 mousedown mousemove mouseup ,对这三个事件进行监听并进行相应的操作。
- 操作设计的节点有：原节点，临时节点，新节点
- 节点的移动涉及事件e的坐标
- 操作元素使用JQUERY
代码实现
相应的注释在文中已有体现，请认真观看，你可以理解的。
- 先定义一个对象 drag，包含拖曳需要用到的参数
- 定义初始化 init 函数，监听各种鼠标事件
- mousedown 事件：克隆一个临时节点。记录鼠标点击位置与节点的位置的X,Y差值，设置克隆副本的样式并在原容器中添加这个副本
- mousemove 事件：判断鼠标的相对位移，设置副本绝对位置的XY,并对鼠标移出浏览器的情况进行处理；对三个UL进行遍历，在不是原容器的情况下，判断鼠标位置是否处于其他容器的范围内，如果是，修改鼠标当前容器的样式。
- mouseup 时间：移除临时节点。对三个UL进行遍历，在不是原容器的情况下，判断鼠标位置是否处于其他容器的范围内，如果是，在该容器下加入新节点，原容器删除原节点。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style>
.container ul{
width: 350px;
padding: 15px;
min-height:300px;
background-color:#FFFFF0;
margin:20px;
display: inline-block;
border-radius: 5px;
border: 1px solid #bbb;
}
.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:#EED2EE;
margin-bottom:10px;
-moz-user-select: none;
user-select: none;
text-indent: 10px;
color: #555;
}
</style>
</head>
<body>
<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>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<!-- <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> -->
<script type="text/javascript">
$(function(){
//出入允许拖拽节点的父容器，一般是ul外层的容器
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>
</body>
</html>
项目demo请点击这里。
总结
以上就是这篇文章的全部内容了，本文还有许多不足，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。
相关推荐
-
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
关键字"拖曳搜索"之"拖曳"功能需要 jQuery UI 之 droppable 库 效果如下: 搜索包含相关关键字时,把拖曳左边关键字到右边框里面 也可以在输入框里输入自定义关键字到下面框 即可搜索 如果去掉不需要的关键词 搜索时 把不需要的关键词从右边框拖曳回到左边 即可 无论原来还是自定义加入的关键词 如果已存在 她会提示... 实现: 复制代码 代码如下: <script type="text/javascript" src=&qu
-
Jquery 快速构建可拖曳的购物车DragDrop
这样一来,购买者只需要把自己感兴趣的商品拖曳到自己的购物车中,也可以从购物车中删除商品 同时更新购物车的总体价格和数量. 那咱们就开始实例吧,本实例并没有链接数据库读取数据来初始化Products,而是创建了一些虚拟的商品如下: 1. 创建Product实体类 复制代码 代码如下: public class Product { public string Code { get; set; } public string Name { get; set; } public string Descr
-
利用jQuery实现简单的拖曳效果实例代码
前言 本文主要给大家介绍了一种利用jQuery实现的简单拖曳效果,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 提出问题 如何实现将一个盒子里的元素拉到另外一个盒子里? 实现思路 此操作包含的事件有 mousedown mousemove mouseup ,对这三个事件进行监听并进行相应的操作. 操作设计的节点有:原节点,临时节点,新节点 节点的移动涉及事件e的坐标 操作元素使用JQUERY 代码实现 相应的注释在文中已有体现,请认真观看,你可以理解的. 先定义一个对象 dr
-
通过jquery实现页面的动画效果(实例代码)
有很多函数可以用来实现动画效果,其中animate函数为最为常见的函数之一.以下为对该函数使用方式的简要介绍. animate函数基本形式 通过animate实现动画效果的基本形式为: $(selector).animate({params},speed,callback); 其中{params}为必须项,它是一个对象,指明了我们希望指定元素通过动画效果运行后,其所具有的的CSS样式,speed和callback则皆为可选项,其中speed指明了动画运行的速度,其值可为数值类型(如1000表示动
-
Android 仿今日头条简单的刷新效果实例代码
点击按钮,先自动进行下拉刷新,也可以手动刷新,刷新完后,最后就多一行数据.有四个选项卡. 前两天导师要求做一个给本科学生预定机房座位的app,出发点来自这里.做着做着遇到很多问题,都解决了.这个效果感觉还不错,整理一下. MainActivity package com.example.fragmentmytest; import android.content.DialogInterface; import android.graphics.Color; import android.os.B
-
jquery实现简单手风琴菜单效果实例
本文实例讲述了jquery实现简单手风琴菜单效果的方法.分享给大家供大家参考.具体实现方法如下: (function($) { var allPanels = $('.accordion > dd').hide(); $('.accordion > dt > a').click(function() { allPanels.slideUp(); $(this).parent().next().slideDown(); return false; }); })(jQuery); HTML代
-
利用iscroll4实现轮播图效果实例代码
前言 iscroll之所以会诞生,主要是因为无论是在以前的iphone.ipod.android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容.相信很多人和我一样,在使用iscroll的是时候只知道可以手动滑动,不知道iscroll的轮播怎么实现,那么以下就是我做的一个轮播效果,亲测有效: 一.html代码,当然可以动态添加下面的小圆点 <div id="wrapper"> <div id="scroller&qu
-
jQuery导航条固定定位效果实例代码
实现效果图: 向下滑动时,导航栏固定 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } img{ display: block; margin: 0 auto; } img#search
-
jquery实现简单文字提示效果
本文实例讲述了jquery实现简单文字提示效果.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jquery实现简单文字提示</title> &l
-
jQuery实现简单的点赞效果
本文实例讲解了jQuery实现简单的点赞效果的详细代码,具体内容如下 效果图: 下面提供一个"点赞"的实例代码,用ASP.NET MVC4+jQuery Ajax实现. Model: namespace MvcAjaxAdd.Models { public class ClickCountModel { [Key] [DatabaseGeneratedAttribute(System.ComponentModel.DataAnnotations.Schema.DatabaseGener
-
使用jQuery实现简单的tab框实例
html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>实现简单的tab框</title> <link rel="stylesheet" href=&qu
-
jquery超简单实现手风琴效果的方法
本文实例讲述了jquery超简单实现手风琴效果的方法.分享给大家供大家参考.核心代码如下: $("#accordion .expanded").hide(); $("a.opening").click(function(){ $(this).next().slideToggle('fast', function(){ $(this).prev("a.opening").toggleClass("active"); }); re