jQuery拖拽移动

淡淡的烟草味﹌ 2022-08-03 15:52 230阅读 0赞

jquery sortable  
它所有的事件回调函数都有两个参数：event和ui  
ui.helper - 表示sortable元素的JQuery对象，通常是当前元素的克隆对象  
ui.position - 表示相对当前对象，鼠标的坐标值对象\{top,left\}  
ui.offset - 表示相对于当前页面，鼠标的坐标值对象\{top,left\}  
ui.item - 表示当前拖拽的元素  
ui.placeholder - 占位符（如果有定义的话）  
ui.sender - 当前拖拽元素的所属sortable对象（仅当元素是从另一个sortable对象传递过来时有用）3

实例:拖动tbody中的tr

function doRefresh() {
        window.location.reload();
    }
    $(function(){
        var changed  = false;
        $("tbody").sortable({
            opacity: 0.5,//拖动的透明度 
            revert: true, //缓冲效果 
            cursor: 'move', //拖动的时候鼠标样式 
            start:function(event, ui){
                if(navigator.userAgent.toLowerCase().match(/firefox/)&&ui.helper!=undefined){
                    ui.helper.css('position','absolute').css('mergin-top',$(window).scrollTop());
                    //当滚动条滚动时关联事件
                    $(window).bind('scroll.sortableplaylist',function(){
                        ui.helper.css('position','absolute').css('mergin-top',$(window).scrollTop());
                    });
                }
            },
            beforeStop:function(event, ui){
                $(window).bind('scroll.sortableplaylist',function(){
                    ui.helper.css('position','absolute').css('mergin-top',0);
                });
            },
            helper:function(e,ui){
       //设置拖动时辅助显示帮助
                ui.children().each(function(){
                    $(this).width($(this).width());
                });
                return ui; 
            },
            scroller:true,
            change : function(event,ui){
                changed = true;
            },
            stop:function(event,ui){
       //允许滚动显示
                //在拖动排序停止时可以保存排序
                if(changed){
                    var currObj = ui.item;
                    var currId = currObj.attr("id");
                    var prevId = currObj.prev().attr("id");
                    var nextId = currObj.next().attr("id");
                    if(undefined==prevId){
                        prevId=0;
                    }
                    if(undefined==nextId){
                        nextId=0;
                    }
                    $.post(ROOT_PATH+"questions/question/"+currId+"/order",{prevId:prevId,nextId:nextId},function(data){
                        if(data==1){
                            doRefresh();
                        }
                    });
                }
            }
    
        }).disableSelection();
    });

发表评论取消回复

表情：

评论列表（有 0 条评论，230人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS拖拽div（移动）

//获取元素 var dv = document.getElementById('dv'); var x = 0; var y = 0; var l = 0;

素颜马尾好姑娘i/ 2023年06月30日 02:20/ 0 赞/ 28 阅读

相关【jQuery】jQuery弹出框可拖拽移动

1.说明此demo需要用到jQuery和bootstrap，使用前需要先引入相关文件因为内容比较简单，所以就不多说明了 2.相关代码位置排版使用了绝对定

忘是亡心i/ 2022年10月07日 06:48/ 0 赞/ 236 阅读

相关图片拖拽键盘移动布局

<%@ page language="java" pageEncoding="UTF-8" import="com.XXX.createPortal.recommendPosi

Love The Way You Lie/ 2022年08月06日 05:08/ 0 赞/ 164 阅读

相关 jQuery拖拽移动

jquery sortable 它所有的事件回调函数都有两个参数：event和ui ui.helper - 表示sortable元素的JQuery对象，通常是当前元素的

淡淡的烟草味﹌/ 2022年08月03日 15:52/ 0 赞/ 231 阅读

相关 Jquery实现div拖拽

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR

ゞ浴缸里的玫瑰/ 2022年06月08日 06:05/ 0 赞/ 231 阅读

相关 js拖拽div移动

js拖拽div移动,就是鼠标点击住div，根据鼠标的位置来改变div的位置如有转载，请标明来自此出处http://blog.csdn.net/qxs965266509，必

拼搏现实的明天。/ 2022年05月13日 00:08/ 0 赞/ 288 阅读

相关 jQuery 拖拽

<!DOCTYPE html> <html><head> <meta charset="utf-8" /> <title>jQu

心已赠人/ 2022年04月14日 20:12/ 0 赞/ 319 阅读

相关 jQuery实现面板拖拽

一.实现功能 1.首先页面有一个面板或者对话框，有长和宽，可以设置为一个div。 2.当把鼠标over到div的某个位置时，鼠标的箭头图片变为一个拖拽的图片。 3.接

矫情吗；*/ 2022年01月31日 07:11/ 0 赞/ 308 阅读

相关 jQuery拖拽原理实例

HTML源代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

今天药忘吃喽~/ 2021年11月19日 11:40/ 0 赞/ 324 阅读

相关 Jquery 可拖拽的Ztree（移动，复制）两种选择

首先要引入ztree依赖的js <link rel="stylesheet" type="text/css" href="<c:url value="/js/comm

本是古典何须时尚/ 2021年09月28日 15:36/ 0 赞/ 297 阅读