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();
  }
}
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问

相似问题

3
MFC用create创建的edit控件样式和拖拽的不一样?
1
javascrupt语言怎么实现用户拖动鼠标实现对页面上的文本框消除合并的功能?
1
有没有双显示器工作的老哥,窗口总是卡在两个屏幕的中间,怎么办?
1
高德 JS API UI组件 拖拽选址 获取不到位置信息
1
WPF窗体最大化后如何从A显示器拖动到另外一个显示器?
1
ios9.0以后 uicollectionview 拖拽 怎么固定某个cell无法移动,别的cell拖动时也无法挤压这个cell?
1
可视化拖拽生成小程序,并且采用开放平台的方式上传,这个思路是怎样的?
1
idea拖拽到副屏 窗口消失了怎么办
2
QListWidget中的Item拖动到QTableWidget上面,将Item中的数据中的数据在Tablewidget上生成四个按钮
0
jquery项目中使用高德地图,拖动过程中,地图中的地标文字会跳闪
0
EasyUI使用Draggable方法拖拽后记录最后位置如何实现?
1
组件化可拖拽生成APP是如何实现的?
5
jquery click事件,点击(不松鼠标)并拖动到区域外之后,无法触发click事件,求解决?
0
我在实现RecycleView拖拽的功能之后,按项目要求要把完成拖拽之后所有item的当前位置上传后台重新排序
1
如何做HTML5拖拽题目?
1
android studio 3.4版本,找不到可以直接拖拽的EditText,是不是必须自己手动写代码?
1
如何解决在IE中input获得焦点后,拖动其他div的滚动条不触发input的失去焦点事件?
1
请问一下,QT里面要实现类似于Simulink那样的的模块之间的连线需要什么类。
2
html如何实现点击按钮后在页面中添加一个标签
1
无边框窗体的WM_NCHITTEST消息怎么响应窗口外(阴影处)的拖动改变大小操作?