玩法介绍当前位置:菲娱2 > 玩法介绍 > >

恒行平台:avalon js实现仿微博拖动图片排序

  

[avalon,js教程,js拖动排序,js实现拖动]avalon js实现仿微博拖动图片排序

  

下文针对仿微博图片随意拖动,调整图片的顺序,讲解的很详细,文章肯定还有欠缺的地方,欢迎提出批评改正。废话不多说了,看具体内容吧。

  

  

点击此处进入源码下载  

  

什么是拖动图片排序?

  

  

就像微博这种,上传后允许用户通过拖动图片,调整几张图片的顺序。

  

  

  

  

可以看到微博在这里把每张图片固定了尺寸,稍微严谨点的话,就需要像上一篇文章那样,外面是响应式的等高等宽的若干div容器,里面则是等比例缩放的响应式图片。

  

  

下面说下要求。

  

  

1.当然首先图片要可以拖动。

  

  

2.图片移出其原本的位置,拖动到目标位置并且未松开鼠标完成拖动前,需要在目标位置设置占位符,让用户预览拖动完成后的效果。

  

  

3.响应式。尺寸改变后,仍然可以完成上面要求。

  

  

4.尽可能兼容更多的浏览器。实际上,写上一篇文章就是为这篇做铺垫的,所以这里也是兼容到ie7.

  

  

最终效果  

  

chrome  

  

  

  

ie8  

  

  

  

ie7  

  

  

  

首先是拖动。

  

  

这里用的代理,即在原本的布局中多了个div,实际拖动的对象就是这个div.具体的,  

  
  
  
  
      
  •   
      
      

      
      
  •   
  
  
  
  
  

对每个单元格绑定mousedown,触发start_drag时,把单元格里的img放到代理

里面,同时获取图片的大小,记下当前鼠标点击的位置,并以点击位置为代理div矩形(图片)的中心点,显示代理,隐藏点击的图片。

  

  

   (责任编辑:admin)

上一篇:js实现的类似于asp数据字典的数据类型代码实例

下一篇:恒行注册官网:移动手机APP软件拥有巨大的潜在商

推荐内容

客户服务热线

010-400-12345

在线客服