共被编辑 2 次

版本 更新时间 贡献者 编辑原因 操作
#r2 8月20日 永不止步13 更新问题 查看

gridster的拖拽功能,将模块拖拽到屏幕最右侧以后,忽然消失

用gridster 实现拖拽功能
1、模块之间位置互换
2、模块拖拽换页

#r1 8月16日 永不止步13 创建问题 查看

gridster的拖拽功能,将模块拖拽到屏幕最右侧以后,忽然消失

题目描述

网站需求类似于一个windows桌面,可以拖拽模块,可以拖拽改变位置,可以拖拽换页

题目来源及自己的思路

领导要求,
一、用gridster 实现拖拽功能
1、模块之间位置互换
2、模块拖拽换页
二、用swiper实现换页(没问题,目前没发现bug)
三、可以添加模块删除模块,增加页,删除页,就是简单的处理数据就可以(没问题,目前没发现bug)

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

index.js代码:

    for(var i = 0; i < pageNum; i++){
      gridster[i] = $('.gridster'+i).gridster({
        widget_margins: [5, 5], // 模块的边距,第一个参数是上下边距,第二个参数是左右边距。
        widget_base_dimensions: [liWidth, liHeight], // 模块的大小,第一个参数是宽度,第二个参数是高度。以像素为单位
        avoid_overlapped_widgets: true, // 不允许模块叠加,如果两个模块的位置一样(data-col和data-row来决定),程序会自动调整他们的位置,这样可以防止模块错乱
        autogenerate_stylesheet: true, // 自动生成将所有窗口小部件放置在各自列和行中所需的所有CSS,并将其注入到<head>文档的中
        max_cols: 9,//要创建的最大列数
        // 拖动改变位置
        draggable: {
          handle: 'header',
          start: function(event, ui) {// 拖动开始执行的函数
            // 以鼠标位置为中心 缩放
            // 元素宽度 - (元素left值+元素宽度-鼠标位置) 就是要缩放的X值
            var rightWidth = $('li.dragging').offset().left + $('li.dragging').width() - ui.pointer.left;
            var scaleLeft = ($('li.dragging').width() - rightWidth) / $('li.dragging').width() * 100 +'%';//缩放的X轴比例
            var topHeight = $('li.dragging').offset().top + $('li.dragging').height() - ui.pointer.top;
            var scaleTop = ($('li.dragging').height() - topHeight) / $('li.dragging').height() * 100 +'%';//缩放的Y轴比例
            $('li.dragging').css({'transform-origin': scaleLeft +' ' + scaleTop});
          },
          drag: function(event, ui, $widget) {// 拖动过程中鼠标移动时执行的函数
            var dragLeft = parseInt($('.drag-dialog').offset().left);
            var dragScroll = 200 - parseInt($('.drag-dialog ul li:eq(0)').offset().top);//拖拽面滚动的值
            var pointerTop = ui.pointer.top + dragScroll;//鼠标移动到区域的值
            var bigLeft = $(window).width()-($(window).width()-(liWidth*9+90))/2
            if(ui.pointer.left > bigLeft){//超出拖拽布局后缩放
              $('li.dragging').addClass('scale');//模块缩放效果
            } else{
              $('li.dragging').removeClass('scale');//模块缩放效果
            }
            if(ui.pointer.left > dragLeft){//left是否在区域
              $('.drag-dialog ul li.drag-cont').each(function(j,ele){
                var eleTop = $(ele).offset().top + dragScroll;
                var eleRange = eleTop + parseInt($(ele).height())
                if(pointerTop > eleTop && pointerTop < eleRange){
                  $(ele).addClass('active').siblings().removeClass('active');//页面经过效果
                  // 在第一个page框里
                  count = j
                  curPage = $('.swiper-pagination-bullet.swiper-pagination-bullet-active').index()
                  curHtml=$('li.dragging');
                  curHtmlSizex = parseInt($(curHtml).attr('data-sizex'));
                  curHtmlSizey = parseInt($(curHtml).attr('data-sizey'));
                  curHtmlRow = parseInt($(curHtml).attr('data-row'));
                  curHtmlCol = parseInt($(curHtml).attr('data-col'));
                  removeAdd = true
                }
              })
            } else {
              removeAdd = false
            }
          },
          stop: function(event, ui, $widget) {
            // 1.先将要拖拽的模块追加到幻灯片
            // 2.刷新幻灯片
            // 3.判断幻灯片 是否超出4行 
            //  有row=5的存在 || row=4 && data-sizey>1 || row=3 && data-sizey>2 || row=2 && data-sizey>3 || row=1 && data-sizey>4
            // 4、没有超出 就 移除 之前页面的 模块  否则提示 空间不足
            $('li.player-revert').removeClass('scale');
            $('.drag-dialog ul li.drag-cont').removeClass('active');//页面经过效果
            if(removeAdd){ // 是拖拽到了右侧
              gridster[curPage].remove_widget(curHtml,function(){
                gridster[count].add_widget( curHtml, curHtmlSizex, curHtmlSizey)
                if(publicMethod.moduleOverrun(count)){// 如果超出
                  layer.msg('空间不足');
                  gridster[count].remove_widget(curHtml,function(){
                    gridster[curPage].add_widget( curHtml, curHtmlSizex, curHtmlSizey, curHtmlCol, curHtmlRow)
                  })
                } else {
                  mySwiper.slideTo(count);
                }
              })
            }
          }
        }
      }).data('gridster');
      if(gridster[i]){
        gridster[i].disable();
      }
    }

gridster.js - v0.5.0 的版本:
limit是true ,为了让能超出拖拽布局范围,我计算了右侧距离改了最大可移动player_max_left

fn.set_limits = function(container_width) {
    container_width || (container_width = this.$container.width());
    // this.player_max_left = (container_width - this.player_width +
    //     - this.options.offset_left);
// 最大可拖拽距离 = 画布加上右侧间距-自身宽度-5间距
    this.player_max_left = (container_width - this.player_width- this.options.offset_left) + ($(window).width() - container_width)/2;
    this.options.container_width = container_width;

    return this;
};
// gridster.js原有代码
if (this.options.limit) {
        if (left > this.player_max_left) {
            left = this.player_max_left;
        } else if(left < this.player_min_left) {
            left = this.player_min_left;
        }
    }

你期待的结果是什么?实际看到的错误信息又是什么?

希望拖拽到右侧不要消失,一直跟随鼠标,

问题描述

1.gridster的拖拽功能,将模块拖拽到屏幕最右侧以后,忽然消失,然后不松开鼠标,往左滑动鼠标就能看到刚刚拖拽的模块,要是再往右侧拖拽,再往左侧滑动,就会发现 间距变大,不知道这个bug怎么解决
鼠标放在模块偏左侧拖拽到右侧就过不去,因为拖拽最大值计算减去了模块的宽度,所以过不去
图片描述

如果鼠标放在模块偏右侧拖拽就现在完美效果,这个模块是24的,拖拽11的模块就直接这么完美,如果拖拽得是3*2,偏左就不好,偏右也是好的
图片描述