wex5——实现拖拽替换效果

继之前发表的文章——元素拖拽之后，终于完成了最终效果，拖拽替换，并且对之前的代码进行了优化。也算有始有终了。
之前只是将代码大概贴了出来，没有进行详细讲解。这次也会弥补上一次的不足之处，将代码产生的一个大概过程阐述一下。一来提升自己，而来希望也能帮助到别人。

插句题外话，自入行以来，真心觉得程序猿大多都特别慷慨，从来不吝啬自己所知道的技术。多少有些感动，没有那么多人不吝啬的指点，我也不会成长成现在这样

回归正题。

第一步是搭建数据库，先在前台界面把内容展示出来

这里不做过多赘述，如果对于数据库与前台界面展示数据不清楚的，可以先看之前的文章wex5 ——— 前台界面展示数据库内容

搭建一个名为drag的数据库，在数据库中件名为items的表，字段如下。

新建drag服务，并在前台界面调用。在界面添加baasData数据库，绑定drag服务。

并用list数据组件对数据进行展示

图为对数据进行初次展示的效果。

下面主要讲解实现效果的代码：

js实现的大概思路还是主要包括三部分：开始——移动——结束

手指触屏对应touchstart

手指移动对应touchmove

手指松开对应touchend

当然在这之前还得做一下准备工作——定义一些全局参数用于承载被拖动的元素，被替换的元素和一些坐标点等

var Model = function(){
        this.callParent();
        
        this.curTarget = null;//被拖动的元素
        this.curPos = null;//坐标点
        this.dropTarget = null;//被替换的元素
        this.iMouseDown = null;//手指是否触屏
        this.lMouseState = null;//状态
        this.dragreplaceCont = [];//将遍历的元素放于此数组中
        this.mouseOffset = null;//鼠标得偏移
        this.callbackFunc = null;//回调函数
    };

在modelLoad中，新建一个div用于承载被拖动的元素

并且遍历要拖动的元素，将他们放置在数组中，用于之后的匹配元素做准备，且设置他们为可拖动状态

Model.prototype.modelLoad = function(event){
        //辅助层用来显示拖拽 
        dragHelper = document.createElement('DIV'); 
        dragHelper.setAttribute("class",'dragHelper czYfqmm ')
        dragHelper.style.cssText = 'position:absolute;display:none;'; 
        document.body.appendChild(dragHelper); 
        
        var dragitems = document.getElementById('displayRoom').getElementsByTagName("a");//获取可拖动的所有元素
        for(var i=0;i<dragitems.length;i++){//遍历可拖动的元素
            this.dragreplaceCont.push(dragitems[i]); 
            dragitems[i].setAttribute('candrag', '1'); 
        }
    };

给元素绑定以上三个事件

首先当然是在start中记录状态值，

Model.prototype.start = function(event){
        //记录变量状态 
        this.iMouseDown = true; 
    };

接下来就是移动的动作：

1、先获取当前鼠标点击的元素

2、判断当前是否为可拖动状态

3、将当前元素赋值给之前定义的全局参数this.curTarget

4、获取元素的坐标点，以及按下的坐标点对于元素左上角的偏移量

5、清空之前在modelload中定义的辅助层dragHelper，将当前元素this.curTarget放进去，设置dragHelper为可见状态，当前元素this.curTarget不可见，

6、记录起始坐标点并且，如果处于移动状态，则设置辅助层dragHelper的top和left值，使其实时移动（使用css的position达到移动效果）

7、遍历各个元素，看当前在移动的元素是否与其中某个除自己之外的元素重合，

8、如果重合，则将被重合的元素赋值给全局变量this.dropTarget，并给this.dropTarget添加被选中的样式

最后是鼠标松开的动作：

1、判断是否有被选中的元素和要被替换的元素

2、获取两个元素所在的行数据，并分别设置两个行数据的值，即对两个值进行替换

3、判断两个行数据是否被改变过，如果有则保存数据，并对一些全局参数进行还原，以备下一次的拖动替换

不知道怎么上传压缩包，所以就用笨方法上传代码了。

 下面附上完整的代码

define(function(require){
    var $ = require("jquery");
    var justep = require("$UI/system/lib/justep");
    
    var Model = function(){
        this.callParent();
        
        this.curTarget = null;
        this.curPos = null;
        this.dropTarget = null;
        this.iMouseDown = null;
        this.lMouseState = null;
        this.dragreplaceCont = [];
        this.mouseOffset = null;
        this.callbackFunc = null;
    };

    Model.prototype.modelLoad = function(event){
        //辅助层用来显示拖拽 
        dragHelper = document.createElement('DIV'); 
        dragHelper.setAttribute("class",'dragHelper czYfqmm ')
        dragHelper.style.cssText = 'position:absolute;display:none;'; 
        document.body.appendChild(dragHelper); 
        
        var dragitems = document.getElementById('displayRoom').getElementsByTagName("a");//获取可拖动的所有元素
        for(var i=0;i<dragitems.length;i++){//遍历可拖动的元素
            this.dragreplaceCont.push(dragitems[i]); 
            dragitems[i].setAttribute('candrag', '1'); 
        }
    };
    
    Model.prototype.start = function(event){
        //记录变量状态 
        this.iMouseDown = true; 
    };

    Model.prototype.move = function(event){
        ev = event || window.event; 
        var target = ev.target || ev.srcElement; 
        var mousePos = this.mouseCoords(ev);
        //如果当前元素可拖拽 
        var dragObj = target.getAttribute('candrag'); 
        if (dragObj != null) {    
            if (this.iMouseDown && !this.lMouseState) {
                //刚开始拖拽 
                this.curTarget = target; 
                this.curPos = this.getPosition(target); 
                this.mouseOffset = this.getMouseOffset(target, ev); 
                // 清空辅助层 
                for (var i = 0; i < dragHelper.childNodes.length; i++) dragHelper.removeChild(dragHelper.childNodes[i]); 
                //克隆元素到辅助层，并移动到鼠标位置 
                dragHelper.appendChild(this.curTarget.cloneNode(true)); 
                dragHelper.style.display = 'block'; 
                dragHelper.firstChild.removeAttribute('data-bind');
                dragHelper.firstChild.removeAttribute('candrag'); 
                dragHelper.firstChild.setAttribute("class","czYfqmm");
                //记录拖拽元素的位置信息 
                this.curTarget.setAttribute('startWidth', parseInt(this.curTarget.offsetWidth)); 
                this.curTarget.setAttribute('startHeight', parseInt(this.curTarget.offsetHeight)); 
                this.curTarget.style.background = 'none'; 
                //记录每个可接纳元素的位置信息，这里一次记录以后多次调用，获取更高性能 
                for (var i = 0; i < this.dragreplaceCont.length; i++) { 
                    with (this.dragreplaceCont[i]) { 
                        if (this.dragreplaceCont[i] == this.curTarget) 
                        continue; 
                        var pos = this.getPosition(this.dragreplaceCont[i]); 
                        setAttribute('startWidth', parseInt(offsetWidth)); 
                        setAttribute('startHeight', parseInt(offsetHeight)); 
                        setAttribute('startLeft', pos.x); 
                        setAttribute('startTop', pos.y); 
                    } 
                } 
            }
        }
        //正在拖拽 
        if (this.curTarget != null) {
            // move our helper div to wherever the mouse is (adjusted by mouseOffset) 
            dragHelper.style.top = mousePos.y -this.mouseOffset.y + "px"; 
            dragHelper.style.left = mousePos.x -this.mouseOffset.x + "px";
            //拖拽元素的中点 
            var xPos = mousePos.x; 
            var yPos = mousePos.y; 
            var havedrop = false; 
            for (var i = 0; i < this.dragreplaceCont.length; i++) { 
                with (this.dragreplaceCont[i]) { 
                    if (this.dragreplaceCont[i] == this.curTarget) 
                    continue;
                    if ((parseInt(getAttribute('startLeft')) < xPos) && (parseInt(getAttribute('startTop')) < yPos) && ((parseInt(getAttribute('startLeft')) + parseInt(getAttribute('startWidth'))) > xPos) && ((parseInt(getAttribute('startTop')) + parseInt(getAttribute('startHeight'))) > yPos)) { 
                        
                        this.dropTarget = this.dragreplaceCont[i];  93                         havedrop = true; 
                        this.dropTarget.className = 'czYfqmm usr catch'; 
                        break; 
                    } 
                } 
            } 
            if (!havedrop && this.dropTarget != null) { 
                this.dropTarget.className = 'czYfqmm usr'; 
                this.dropTarget = null; 
            } 
        }//正在拖拽end 
        this.lMouseState = this.iMouseDown;
        if (this.curTarget) return false; //阻止其它响应（如：鼠标框选文本） 
    };

    Model.prototype.end = function(event){
        if (this.curTarget) { 
            dragHelper.style.display = 'none'; //隐藏辅助层 
            if (this.dropTarget != null) { 
                    //有元素接纳，两者互换 
                    var datass = this.comp("itemsData");
                    var rows = datass.find(['name'], [this.curTarget.innerHTML])[0];
                    var rows1 = datass.find(['name'], [this.dropTarget.innerHTML])[0];
                    var rowsname = this.curTarget.innerHTML;
                    var rows1name = this.dropTarget.innerHTML;
                    rows.val("name",rows1name);
                    rows1.val("name",rowsname);
                    this.dropTarget.className = 'czYfqmm usr'; 
                    this.dropTarget = null; 
                    if (this.callbackFunc != null) { 
                        this.callbackFunc(this.curTarget); 
                    } 
                    //如果两者已替换，则保存数据库
                    if(rows.row.name.changed && rows1.row.name.changed){
                        datass.saveData({
                            "onSuccess" : function(event){
                                console.log("替换成功");
                            }
                        })
                    }
            }
            this.curTarget.style.background = 'green';
            this.curTarget.style.visibility = 'visible'; 
            this.curTarget.setAttribute('candrag', '1');
        }
        this.curTarget = null; 
        this.iMouseDown = false; 
        this.lMouseState = false; 
    };
    
    Model.prototype.mouseCoords = function(ev){//返回鼠标相对页面左上角的坐标
        if (ev.pageX || ev.pageY) { 
            return { x: ev.pageX, y: ev.pageY }; 
        } 
        return { 
            x:ev.originalEvent.touches[0].pageX,
            y:ev.originalEvent.touches[0].pageY    
        }; 
    }
    Model.prototype.getPosition = function(e){//返回当前item相对页面左上角的坐标
        var left = 0; 
        var top = 0; 
        while (e.offsetParent) { 
            left += e.offsetLeft + (e.currentStyle ? (parseInt(e.currentStyle.borderLeftWidth)).NaN0() : 0); 
            top += e.offsetTop + (e.currentStyle ? (parseInt(e.currentStyle.borderTopWidth)).NaN0() : 0); 
            e = e.offsetParent; 
        } 
        return { x: left, y: top }; 
    }
    Model.prototype.getMouseOffset = function(target, ev){//鼠标位置相对于item的偏移量
        ev = ev || window.event; 
        var docPos = this.getPosition(target); 
        var mousePos = this.mouseCoords(ev); 
        return { x: mousePos.x - docPos.x, y: mousePos.y - docPos.y }; 
    }


    return Model;
});

效果图

如需转载，请注明出处。