没有合适的资源?快使用搜索试试~ 我知道了~
前言 本文主要给大家介绍了一种利用jQuery实现的简单拖曳效果,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。 提出问题 如何实现将一个盒子里的元素拉到另外一个盒子里? 实现思路 此操作包含的事件有 mousedown mousemove mouseup ,对这三个事件进行监听并进行相应的操作。 操作设计的节点有:原节点,临时节点,新节点 节点的移动涉及事件e的坐标 操作元素使用JQUERY 代码实现 相应的注释在文中已有体现,请认真观看,你可以理解的。 先定义一个对象 drag,包含拖曳需要用到的参数 定义初始化 init 函数,监听各种鼠标事件
资源详情
资源评论
资源推荐
利用利用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>
weixin_38607908
- 粉丝: 7
- 资源: 935
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0