avalonjs实现仿微博的图片拖动特效


Posted in Javascript onMay 06, 2015

效果:

avalonjs实现仿微博的图片拖动特效

HTML:

<div id='post_img' ms-controller='post_img'>
   <ul id='post_img_inner' ms-mousemove='onmousemove'>
    <li ms-repeat-el="post_img_list" class='inline-block' ms-mousedown='onmousedown($event,$index,el)' ms-attr-id='post_img_item{{$index}}'>
      <img ms-src='el' class='uploaded_img'></li>
  </ul>
</div>

JS:

var drag_holder=null,index=-1,ori_src=null,drag_flag=false;//拖动的代理,原图片,原图片的src
var post_img = avalon.define('post_img', function(vm) {
  vm.post_img_list=[];//保存所有图片的src
  vm.onmousedown=function(e,i,el){
    $('drag_proxy').style.display='block';
    var target=e.target.parentNode;
    var xx = e.clientX; 
    var yy = e.clientY;
    $('drag_proxy').style.top=yy+'px';
    $('drag_proxy').style.left=xx+'px';
    if(target&&target.nodeName=='LI'){
      ori_src=el;
      index=target.getAttribute('id').substring(13);
      $('drag_proxy').innerHTML=target.innerHTML;
      post_img.post_img_list.splice(i, 1, 'about:blank');
    }
    drag_flag=true;
  }; 
  vm.onmousemove=function(e){
    if(drag_flag){//如果点下了图片
      var xx = e.clientX; 
      var yy = e.clientY; 
      $('drag_proxy').style.top=yy+'px';
      $('drag_proxy').style.left=xx+'px';
      var x=xx-avalon($('post_img')).offset().left;
      var y=yy-avalon($('post_img')).offset().top;
      //例子没有考虑滚动条的情况
      var x_index=Math.floor(x/100);//图片尺寸100*100
      var y_index=Math.floor(y/100);
      post_img.post_img_list.splice(index, 1);//删除当前图片的li
      var target_index=3*y_index+x_index;//目标图片的位置(3*3)
      if(post_img.post_img_list.indexOf('about:blank')!=target_index)
      //如果图片数组中没有src=about:blank这个占位置的li
        post_img.post_img_list.splice(target_index, 0, 'about:blank');
        //添加src=about:blank
      index=target_index;
      //会触发很多次move,所以触发一次就改动一次
    }
  };
});
document.onmouseup=function(e){
  drag_holder=null;
  if(ori_src){
    post_img.post_img_list.splice(index, 1);
    //删除src=about:blank
    post_img.post_img_list.splice(index, 0,ori_src);
    //添加原图片
  }
  $('drag_proxy').style.display='none';
  $('drag_proxy').innerHTML='';
  drag_flag=false;
};

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
一实用的实现table排序的Javascript类库
Sep 12 Javascript
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
JavaScript的Cookies
Jan 16 Javascript
jquery Firefox3.5中操作select的问题
Jul 10 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
Jul 19 Javascript
JavaScript的setter与getter方法
Nov 29 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 Javascript
JS数组的常用方法整理
Mar 31 Javascript
avalonjs制作响应式瀑布流特效
May 06 #Javascript
javascript实现简单的html5视频播放器
May 06 #Javascript
js实现的四级左侧网站分类菜单实例
May 06 #Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
May 06 #Javascript
完美实现仿QQ空间评论回复特效
May 06 #Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 #Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 #Javascript
You might like
php面向对象全攻略 (三)特殊的引用“$this”的使用
2009/09/30 PHP
PHP XML操作类DOMDocument
2009/12/16 PHP
JS location几个方法小姐
2008/07/09 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
js获取height和width的方法说明
2013/01/06 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
2016/06/20 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
2018/12/20 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
[07:03]显微镜下的DOTA2第九期——430圣堂刺客杀戮秀
2014/06/20 DOTA
python共享引用(多个变量引用)示例代码
2013/12/04 Python
分享Python字符串关键点
2015/12/13 Python
Python Web框架Tornado运行和部署
2020/10/19 Python
windows下Python实现将pdf文件转化为png格式图片的方法
2017/07/21 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
对pandas replace函数的使用方法小结
2018/05/18 Python
浅析python3中的os.path.dirname(__file__)的使用
2018/08/30 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
Python连接Oracle之环境配置、实例代码及报错解决方法详解
2020/02/11 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
美国智能家居专家:tink
2019/06/04 全球购物
干部行政关系介绍信
2014/01/17 职场文书
学校师德师风整改措施
2014/10/27 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
2014年科协工作总结
2014/12/09 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
舌尖上的中国观后感
2015/06/02 职场文书