sencha touch listItem 拖拽处理

因为ListItem 是从store 中取到的一行行数据，不太好进行拖拽处理，

上面的Control

control : {msg : {initialize : 'msgListInitalize',itemtouchstart: 'onItemtouchstart'},

这是页面初始化时候的控制

view.element.on({            dragstart: {        fn: this.onDragStart,        order: 'before',        delegate :'.list-item',        scope:me            },            dragend: {        fn: this.onDragEnd,        delegate :'.list-item',        scope:me            }});

 /**     * 点击item绑定拖拽配置     */    onItemtouchstart: function( self, index, target, record, e, eOpts ) {    if (target.getDraggable() == null) {    var objDomMore = Ext.get(target.element.query('.more')).last().getWidth();target.setDraggable({direction:'horizontal',              constraint: {                min: { x: -objDomMore, y: 0 },                max: { x: 0, y: 0 }              }});    }        var listitems = self.getViewItems();        Ext.each(listitems,function(obj) { // 未被点击item的拖拽配置去除    if (obj != target)    obj.setDraggable(null);})    },        onDragStart: function(self, e, dom1, dom2, eOpts) {    var axis={};axis.start={x:self.previousX,y:self.previousY};axis.move={x:self.pageX,y:self.pageY};axis.abs={x:Math.abs(self.pageX-self.previousX),y:Math.abs(self.pageY-self.previousY)}    var obj = Ext.get(self.getTarget());    var obj1 = obj.parent().parent();    var objEc = Ext.getCmp(obj1.getId());    var list = this.getMsg();    var scrolly = list.getScrollable().getIndicators().y;    var domListItem = dom1.parentNode.parentNode;    var objDomMore = Ext.get(domListItem.querySelector('.more')).getWidth();        if (objDomMore == 0) {// 如果没有操作栏，则去除拖拽行为    objEc.setDraggable(null);    return false;    }    /** 如果有折叠部分内容让其全部显示则不能拖动 */    var objDomstretch = Ext.get(domListItem.querySelector('.stretch'));    if(objDomstretch!=null){        objEc.setDraggable(null);    return false;    }    /** 判断初始的拖拽方向 */    if (axis.abs.x < axis.abs.y) {// 上下拖动时，把拖拽配置除去    objEc.setDraggable(null);    scrolly.setHidden(false);    } else {// 左右拖拽时，禁止页面滚动并隐藏滚动条    list.setScrollable(false);    scrolly.setHidden(true);    }    },        onDragEnd: function(self, e, dom1, dom2, eOpts) {    var obj = Ext.get(self.getTarget());    var obj1 = obj.parent().parent();    var objEc = Ext.getCmp(obj1.getId()),draggable = objEc.getDraggable();    var list = this.getMsg();        /** 超过操作栏宽度一半时会拖拽成功，否则回弹原始状态 */    if (draggable && draggable.offset) {    var offsetObj = Ext.clone(draggable.offset),offset = offsetObj.x; var domListItem = dom1.parentNode.parentNode;    var objDomMore = Ext.get(domListItem.querySelector('.more')).getWidth();    if (Math.abs(offset)>objDomMore/2) {    if(offset > 0) {    offsetObj ={x:0,y:0};    } else {    offsetObj ={x:-objDomMore,y:0};    }    } else {    if(offset > 0) {    offsetObj ={x:-objDomMore,y:0};    } else {    offsetObj ={x:0,y:0};    }    }    draggable.getTranslatable().translate(offsetObj.x, offsetObj.y);    if (offsetObj.x==0)// 操作栏隐藏时，拖拽配置去除    objEc.setDraggable(null);    }    var scrolly = list.getScrollable().getIndicators().y;    if (scrolly.isHidden()) {// 如果滚动禁止状态下，list恢复滚动    list.setScrollable(true);    }    },    下面是我的页面代码结构图<pre name="code" class="javascript"> new Ext.XTemplate('<div class="list-item">','<div class="{[this.getRightStyle(values.message.content, values.isRead)]}">','<h3><b>{message.title}</b></h3><p class="collapse">{message.content}</p><span>{message.publishDate}</span></div>','<div linkModule="{message.linkModule}" url="{message.url}" class="more {[this.getMoreCss(values.message.linkType)]}">','<span class="detail icon-detail {[this.getMoreStyle(values.message.linkType)]}" style="text-align: center;"></span>' +'<span class="del icon-trash" style="text-align: center;"></span></div>','</div>',)