網站首頁 編程語言 正文
本文實例為大家分享了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%;
? ? ? ? ? ? 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原文鏈接：https://blog.csdn.net/sdvjbc/article/details/85048388
- 上一篇：ABP框架中的事件總線功能介紹_實用技巧
- 下一篇：為ABP框架配置數據庫_基礎應用
相關推薦
- 2022-07-06 YOLOv5目標檢測之anchor設定_python
- 2022-09-21 WPF+SkiaSharp實現自繪拖曳小球_C#教程
- 2022-09-24 Python?tkinter?多選按鈕控件?Checkbutton方法_python
- 2022-03-29 C語言全排列回溯算法介紹_C 語言
- 2022-06-07 Android音視頻開發之MediaPlayer使用教程_Android
- 2022-04-19 Windows中Python上傳文件到Liunx下的fastdfs
- 2024-01-27 什么是DTO ，DTO 有什么作用
- 2022-09-19 C語言中switch語句基本用法實例_C 語言
- 最近更新
-
- window11 系統安裝 yarn
- 超詳細win安裝深度學習環境2025年最新版（
- Linux 中運行的top命令 怎么退出？
- MySQL 中decimal 的用法？ 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎操作-- 運算符，流程控制 Flo
- 1. Int 和Integer 的區別，Jav
- spring @retryable不生效的一種
- Spring Security之認證信息的處理
- Spring Security之認證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權
- redisson分布式鎖中waittime的設
- maven:解決release錯誤：Artif
- restTemplate使用總結
- Spring Security之安全異常處理
- MybatisPlus優雅實現加密？
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務發現-Nac
- Spring Security之基于HttpR
- Redis 底層數據結構-簡單動態字符串（SD
- arthas操作spring被代理目標對象命令
- Spring中的單例模式應用詳解
- 聊聊消息隊列，發送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠程分支
提供CDN加速