移动端上下拖动调整顺序效果_jquery、css实现移动端元素拖
动排序
注：本⽂原创，转载请注明出处
1.近期需要实现⼀个选项进⾏拖动排序的页⾯，页⾯如下:
初出茅庐的故事2.JSP页⾯代码：
⽀XX代扣
微XX代扣
三年级上册英语教案XXX银⾏代扣
AAA银⾏代扣
CCC银⾏代扣
SSS银⾏代扣
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%;有声读物mp3
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);jon snow
-moz-opacity:0.7;
opacity: 0.7;
box-shadow:#000 0px 5px 6px 3px ;
}
.drag-int-div{
background-color: #dddddd;
}
4.js代码
/**
overdrive*
*/2018考研英语答案
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 choEleNum = null; //选择的是第⼏个元素
var eleMoveDistance = 0; //选择元素相对于其他元素的距离
var isNeedMoveEle = true; //其他元素是否需要移动
var theMaxNumberAttr = null; //元素最⼤的number值lady
var theMinNumberAttr = null; //元素最⼩的number值
var theMaxMoveScope = null; //可以移动的最⼤范围 ，最⼩范围为topHeightInt；//开始移动
function dragStart(e) {
