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 相关文章推荐
js函数般调用正则
Apr 08 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
Dec 24 Javascript
jquery实现盒子下拉效果示例代码
Sep 12 Javascript
两个数组去重的JS代码
Dec 04 Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 Javascript
JavaScript编程中布尔对象的基本使用
Oct 25 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
Apr 25 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
May 03 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
OpenLayers加载缩放控件使用方法详解
Sep 25 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
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
php中使用url传递数组的方法
2015/02/11 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
详解PHP中的外观模式facade pattern
2018/02/05 PHP
PHP生成短网址的思路以及实现方法的详解
2019/03/25 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
2019/06/14 PHP
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
jQuery实现动态文字搜索功能
2017/01/05 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
NVM安装nodejs的方法实用步骤
2019/01/16 NodeJs
使用form-create动态生成vue自定义组件和嵌套表单组件
2019/01/18 Javascript
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
python爬取网易云音乐评论
2018/11/16 Python
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
python批量创建指定名称的文件夹
2019/03/21 Python
python实现文件的备份流程详解
2019/06/18 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
Python多线程正确用法实例解析
2020/05/30 Python
python字典key不能是可以是啥类型
2020/08/04 Python
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
后勤园长自我鉴定
2013/10/17 职场文书
法律进学校实施方案
2014/03/15 职场文书
小摄影师教学反思
2014/04/27 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书
浅谈Golang 嵌套 interface 的赋值问题
2021/04/29 Golang
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python
Python多线程 Queue 模块常见用法
2021/07/04 Python