avalonjs仿微博的图片拖动

最新版http://www.cnblogs.com/TheViper/p/4725693.html

效果：

转载请注明出处： http://www.cnblogs.com/TheViper/p/4026401.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>

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;
};

司徒正美https://github.com/RubyLouvre/avalon的avalon mvvc真的很强大！