jquery+css实现移动端元素拖动排序
本文实例为大家分享了jquery+css实现移动端元素拖动排序的具体代码，供大家参考，具体内容如下
1.近期需要实现一个选项进行拖动排序的页面，页面如下:
2.JSP页面代码：
<body> <div class="main"> <div id="drag-div" class="drag-div"> <div class="others"> <div class="test" style="height: 200px;width: 100%;"></div> </div> <div class="drag-inset-div"> <div class="drag-div-elem" number="1"> <div class="payway-info">支XX代扣</div> <div class="drag-elem-btn"> <div class="drag-elem-btn-icon"></div> </div> </div> <div class="drag-div-elem" number="2"> <div class="payway-info">微XX代扣</div> <div class="drag-elem-btn"> <div class="drag-elem-btn-icon"></div> </div> </div> <div class="drag-div-elem" number="3"> <div class="payway-info">XXX银行代扣</div> <div class="drag-elem-btn"> <div class="drag-elem-btn-icon"></div> </div> </div> <div class="drag-div-elem" number="4"> <div class="payway-info">AAA银行代扣</div> <div class="drag-elem-btn"> <div class="drag-elem-btn-icon"></div> </div> </div> <div class="drag-div-elem" number="5"> <div class="payway-info">CCC银行代扣</div> <div class="drag-elem-btn"> <div class="drag-elem-btn-icon"></div> </div> </div> <div class="drag-div-elem" number="6"> <div class="payway-info">SSS银行代扣</div> <div class="drag-elem-btn"> <div class="drag-elem-btn-icon"></div> </div> </div> </div> </div> </div> </body>
3.css样式代码
body {
background-color: #ffffff;
padding: 0;
margin: 0;
}
.main{
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 0px;
}
.drag-div{
width: 100%;
height:100%;
overflow:auto;
position: absolute;
}
.others{
width: 100%;
height: auto;
background-color: #ddd000;
position: relative;
}
.drag-div-elem{
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
border-bottom:1px solid #dddddd;
border-top: 1px solid #dddddd;
width: 100%;
height: 50px;
background-color: #ffffff;
position: absolute;
}
.drag-first-elem{
border-top: 1px solid #dddddd;
}
.payway-info{
width: 80%;
height: 100%;
float: left;
padding-left: 15px;
text-align: left;
line-height: 50px;
font-size: 20px;
}
.drag-elem-btn{
width: 20%;
max-width:60px;
height: 48px;
float: right;
padding: 10px;
border: 0px;
}
.drag-elem-btn-icon{
width: 100%;
height: 100%;
border-left: 0px;
border-right: 0px;
border-top: 4px solid #dddddd;
border-bottom:4px solid #dddddd;
padding-bottom: 8px;
padding-top: 8px;
background-clip:content-box;
background-color: #dddddd;
}
.show-top{
z-index: 20;
filter:alpha(Opacity=70);
-moz-opacity:0.7;
opacity: 0.7;
box-shadow:#000 0px 5px 6px 3px ;
}
.drag-inset-div{
background-color: #dddddd;
}
4.js代码
/**
*
*/
var isdrag = true; //是否移动
var topHeight = $(".others").css("height"); //头部div的高度
var topHeightInt = 0;
var elementHeight = $(".drag-div-elem").css("height"); //每一个移动元素DIV的高度
var elementHeightInt = 0;
var halfElementHeightInt = 0;
var startEleCssTopInt;//元素div的起始时的top值
var lastTouchTempY = null;//上一次滑动时元素触摸点坐标
var startTouchY; //起始时的触摸点坐标
var choseEleNum = null; //选择的是第几个元素
var eleMoveDistance = 0; //选择元素相对于其他元素的距离
var isNeedMoveEle = true; //其他元素是否需要移动
var theMaxNumberAttr = null; //元素最大的number值
var theMinNumberAttr = null; //元素最小的number值
var theMaxMoveScope = null; //可以移动的最大范围 ，最小范围为topHeightInt；
//开始移动
function dragStart(e) {
isdrag = true;
e.preventDefault();
startTouchY = e.originalEvent.targetTouches[0].pageY;
var obj = $(e.target);
var paywayEleObj = obj.parents(".drag-div-elem");
choseEleNum = $(paywayEleObj).attr("number");
var startTouchCssTop = $(paywayEleObj).css("top");
if (undefined == startTouchCssTop || null == startTouchCssTop
|| "auto" == startTouchCssTop) {
startEleCssTopInt = topHeightInt;
} else {
startEleCssTopInt = parseInt(startTouchCssTop.substring(0,
startTouchCssTop.length - 2));
}
$(paywayEleObj).addClass("show-top");
}
function dragMove(e) {
var direction = "up";
e.preventDefault();
//获取移动的距离
var moveTouchY = e.originalEvent.targetTouches[0].pageY; //获取第一个触点
console.log("moveTouchY==="+moveTouchY);
console.log("lastTouchTempY==="+lastTouchTempY);
if (isdrag) {
var obj = $(e.target);
var paywayEleObj = obj.parents(".drag-div-elem");
//判断是不是在可移动的范围内
if(moveTouchY < topHeightInt || moveTouchY > theMaxMoveScope){
return;
}
//此次滑动的距离
var distance = moveTouchY - startTouchY;
eleMoveDistance = eleMoveDistance + Math.abs((moveTouchY - (null == lastTouchTempY?startTouchY:lastTouchTempY)));
if(null == lastTouchTempY){
//向上滑动
if(startTouchY > moveTouchY){
direction = "up";
}else{
direction = "down";
}
}else{
//向上滑动
if(lastTouchTempY > moveTouchY){
direction = "up";
}else{
direction = "down";
}
}
var newCssTop = startEleCssTopInt + distance;
if(newCssTop<0){
return;
}
$(paywayEleObj).css({"top":newCssTop+"px"});
console.log("eleMoveDistance==="+eleMoveDistance);
//向下移动
if("down" == direction && parseInt(theMaxNumberAttr) > parseInt(choseEleNum)){
if(isNeedMoveEle && eleMoveDistance < elementHeightInt && eleMoveDistance >= halfElementHeightInt){
isNeedMoveEle = false;
var autoUpEleNum = parseInt(choseEleNum) + 1;
var autoUpEleCssTop = $(".drag-div-elem[number='"+autoUpEleNum+"']").css("top");
var autoUpEleCssTopInt = parseInt(autoUpEleCssTop.substring(0,autoUpEleCssTop.length-2));
var autoUpEleNewTop = autoUpEleCssTopInt - (elementHeightInt + 1);
$(".drag-div-elem[number='"+autoUpEleNum+"']").css({"top":autoUpEleNewTop+"px"});
//换number
$(".drag-div-elem[number='"+autoUpEleNum+"']").attr("number",choseEleNum);
$(paywayEleObj).attr("number",autoUpEleNum);
choseEleNum = autoUpEleNum;
}else if(eleMoveDistance >= elementHeightInt){
eleMoveDistance = 0;
isNeedMoveEle = true;
}
}
//向上移动
if("up" == direction && parseInt(theMinNumberAttr) < parseInt(choseEleNum)){
if(isNeedMoveEle && eleMoveDistance < elementHeightInt && eleMoveDistance >= halfElementHeightInt){
isNeedMoveEle = false;
var autoUpEleNum = parseInt(choseEleNum) - 1;
var autoUpEleCssTop = $(".drag-div-elem[number='"+autoUpEleNum+"']").css("top");
var autoUpEleCssTopInt = parseInt(autoUpEleCssTop.substring(0,autoUpEleCssTop.length-2));
var autoUpEleNewTop = autoUpEleCssTopInt + (elementHeightInt + 1);
$(".drag-div-elem[number='"+autoUpEleNum+"']").css({"top":autoUpEleNewTop+"px"});
//换number
$(".drag-div-elem[number='"+autoUpEleNum+"']").attr("number",choseEleNum);
$(paywayEleObj).attr("number",autoUpEleNum);
choseEleNum = autoUpEleNum;
}else if(eleMoveDistance >= elementHeightInt){
eleMoveDistance = 0;
isNeedMoveEle = true;
}
}
lastTouchTempY = moveTouchY;
}
}
function dragEnd(e) {
e.preventDefault();
isdrag = false;
lastTouchTempY = null;
var obj = $(e.target);
var paywayEleObj = obj.parents(".drag-div-elem");
$(paywayEleObj).removeClass("show-top");
//修正移动的元素的top
var number = $(paywayEleObj).attr("number");
var top = 0 + ( elementHeightInt + 1 ) * (parseInt(number)-1);
$(paywayEleObj).css({"top":(top+topHeightInt)+"px"});
}
$(function(){
topHeightInt = parseInt(topHeight.substring(0, topHeight.length - 2));
elementHeightInt = parseInt(elementHeight.substring(0,elementHeight.length-2));
halfElementHeightInt = parseInt(elementHeightInt+2) / 2;
var elementDivArr = $(".drag-div").find(".drag-div-elem");
theMinNumberAttr = $(elementDivArr[0]).attr("number");
for(var i=0;i<elementDivArr.length;i++){
var eleObj = elementDivArr[i];
var number = $(eleObj).attr("number");
theMaxNumberAttr = number;
var top = 0 + ( elementHeightInt + 1 ) * (parseInt(number)-1);
$(eleObj).css({"top":(top+topHeightInt)+"px"});
}
theMaxMoveScope = topHeightInt + number * ( elementHeightInt + 1 );
$(".drag-inset-div").css("height",(number * ( elementHeightInt + 1 ) + 1) +"px");
$(".drag-elem-btn").on("touchstart", dragStart);
$(".drag-elem-btn").on("touchmove", dragMove);
$(".drag-elem-btn").on("touchend", dragEnd);
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jQuery实现的简单对话框拖动功能示例
本文实例讲述了jQuery实现的简单对话框拖动功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>www.jb51.net jquery 拖动&
-
jQuery实现移动端悬浮拖动效果
模拟手机端悬浮按钮功能,自动吸附两边,并且不能超过活动区域,上下超过自动吸附上或下 因为是移动端端事件,需要调试到移动端才可以看效果 以下是代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed
-
jQuery仿360导航页图标拖动排序效果代码分享
jquery实现360浏览器导航页图标拖动从新排序特效源码是一款模仿360浏览器导航页网站图标拖动排序的代码.本段代码适应于所有网页使用,有兴趣的朋友们可以学习一下. 运行效果图: ----------------------查看效果 下载源码----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的360导航页图标拖动排序效果代码如下 <!DOCTYPE
-
针对后台列表table拖拽比较实用的jquery拖动排序
现在很多后台列表为了方便均使用拖拽排序的功能,对列表进行随意的排序. 话不多说 ,我在网上找了一些demo,经过对比,现在把方便实用的一个demo列出来,基于jqueryUI.js 先上html代码,很简单: 复制代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jqueryUI拖动</title>
-
jquery实现表格行拖动排序
本文实例为大家分享了jquery实现表格行拖动排序的具体代码,供大家参考,具体内容如下 引入JS <script src="jquery.min.js"></script> <script src="jquery-ui.min.js"></script> html代码 <!doctype html> <html> <head> <meta charset="U
-
jQuery拖动元素并对元素进行重新排序
本文实例讲述了jQuery拖动元素并对元素进行重新排序的实现方法,分享给大家供大家参考,具体实现内容如下 效果图: 具体内容如下: 从上图可以看出我们今天要实现的功能.当用户拖动一个图片时,就能改变图片的已有排序并更新表中的排列顺序.比如用户可以随意拖动我们网站中的布局,如谷歌iGoogle就已经实现了.这样便很好的提高了用户体验. 下边,我们一步一步来实现这个功能. <span id="show"> <div> <input id="check
-
jQuery-ui插件sortable实现自由拖动排序
本文为大家分享了jQuery ui插件sortable实现自由拖动排序的具体方法,供大家参考,具体内容如下 此为网上资源demo自己做了修改,记录下方便日后的学习. 效果展示: 代码展示: <!doctype html> <html lang="en"> <!-- 学习功能:使用Jquery-ui的sortable插件实现拖动排序 author: lisa于2018-5-30 --> <head> <meta charset=&qu
-
基于JQuery的列表拖动排序实现代码
要求 拖动排序,从名字就不难想像,就是按住一行数据拖到想要的排序位置,保存新的排序队列. 思路 首先给列表行建立锚点,绑定mousedown和mouseup事件,当鼠标移动到想要插入的位置时,将对象行移动到目标行,然后对其经过的所有行进行排序处理. 思路很简单,但这里面仍然有几个问题要注意 1.移动到什么位置可以视作要插入到目标行的位置.2.移动出了顶端和底端时,判断为第一和最后.3.向上移动和向下移动的处理 解决 关于事件 Javascript里鼠标按下和放开事件为onmousedown,on
-
jquery对元素拖动排序示例
完整代码:(aspx文件末尾有下载) 复制代码 代码如下: <!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> <
-
jquery实现的鼠标拖动排序Li或Table
1.前端页面 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Table.aspx.cs" Inherits="拖动排序Li或Table" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http