jquery+css實現(xiàn)移動端元素拖動排序
更新時間：2022年02月23日 11:32:32 作者：sdvbbc
這篇文章主要為大家詳細介紹了jquery+css實現(xiàn)移動端元素拖動排序，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了jquery+css實現(xiàn)移動端元素拖動排序的具體代碼，供大家參考，具體內(nèi)容如下
1.近期需要實現(xiàn)一個選項進行拖動排序的頁面，頁面如下:
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");
? ? ? ? //判斷是不是在可移動的范圍內(nèi)
? ? ? ? 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);
});以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
jQuery獲取文本節(jié)點之 text()/val()/html() 方法區(qū)別
在jquery中val,text,html都能取到值,或加一個參數(shù)來賦值,那么它們有些什么區(qū)別?2011-03-03
jquery獲取對象的方法足以應(yīng)付常見的各種類型的對象
獲取對象是比較常見的操作了，因為想要操作一個對象之前，一定要先獲取，這是必須的，下面整理了常見對象的獲取方法，希望對大家有所幫助2014-05-05
jQuery中通過ajax的get()函數(shù)讀取頁面的方法
這篇文章主要介紹了jQuery中通過ajax的get()函數(shù)讀取頁面的方法,需要的朋友可以參考下2016-02-02
zepto與jquery的區(qū)別及zepto的不同使用8條小結(jié)
這篇文章主要介紹了zepto與jquery的區(qū)別及zepto的不同使用8條小結(jié) 的相關(guān)資料,需要的朋友可以參考下2016-07-07
jquery實現(xiàn)的可隱藏重現(xiàn)的靠邊懸浮層實例代碼
本實例使用jquery操作div的CSS實現(xiàn)了可隱藏重現(xiàn)的靠邊懸浮層，具體實現(xiàn)代碼如下，感興趣的朋友可以參考下哈2013-05-05
可見性過濾選擇器對于dom中隱藏的一些元素還是比較實用的，具體的使用方法如下，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-06-06
jQuery?v3.3.1的BUG以及解決辦法(附解決方案)
這篇文章描述了我們?FineUIPro?產(chǎn)品?更新中遇到的一個問題，最終將問題定位到?jQuery.position()?函數(shù)，雖然jQuery的做法是依照HTML規(guī)范來的，但是?jQuery.offsetParent()?和?jQuery.position()?兩個函數(shù)有沖突，并且會導(dǎo)致之前的jQuery插件出錯，應(yīng)該算是一個BUG吧2023-03-03
jQuery動態(tài)操作表單示例【基于table表格】
這篇文章主要介紹了jQuery動態(tài)操作表單,結(jié)合實例形式分析了jQuery針對table表格的數(shù)據(jù)添加、刪除、元素修改、提交等相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
這篇文章主要為大家分享了一份全面詳細的jQuery常見開發(fā)技巧手冊，幫助大家更好的進行jquery開發(fā)，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要介紹了jquery操作select常見方法,結(jié)合實例形式總結(jié)分析了jQuery操作select常見的7種情況與相關(guān)操作技巧,需要的朋友可以參考下2019-05-05