roojs-bootstrap.js

roojs-bootstrap-debug.js
Roo/bootstrap/Card.js

diff --git a/Roo/bootstrap/Card.js b/Roo/bootstrap/Card.js
index 4e3d508..f9c7f0e 100644 (file)
--- a/Roo/bootstrap/Card.js
+++ b/Roo/bootstrap/Card.js
@@ -108,7 +108,8 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
     dropable : false,
     drop_group : false,
     childContainer : false,
-
+    dropEl : false, /// the dom placeholde element that indicates drop location.
+    
     layoutCls : function()
     {
         var cls = '';

diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js
index cc8f0ae..28ed928 100644 (file)
--- a/roojs-bootstrap-debug.js
+++ b/roojs-bootstrap-debug.js
@@ -2254,26 +2254,36 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
        while ((target !== null) && (target.parentNode != this.bodyEl.dom)) {
            target = target.parentNode;
        }
+       //Roo.log([ 'target' , target ? target.id : '--nothing--']);
        // see if target is one of the 'cards'...
        var ctarget = false;
        var cards = [];
+       //Roo.log(this.items.length);
+       var lpos = pos = false;
        for (var i = 0;i< this.items.length;i++) {
-           if (this.items[i].xtype != 'Card') {
+           
+           if (!this.items[i].el.hasClass('card')) {
                continue;
            }
-           cards.push(this.items[i].el.dom);
-           if (target == this.items[i].el.dom) {
-               ctarget = target;
+           pos = this.getDropPoint(e, this.items[i].el.dom);
+           
+           //Roo.log(this.items[i].el.dom.id);
+           cards.push(this.items[i]);
+           if (pos == 'above') {
+               ctarget = this.items[i > 0 ? i-1 : 0];
+               pos = i > 0 ? 'below' : pos;
+               break;
            }
        }
        
        if (!ctarget) {
            ctarget = cards[cards.length-1] || this.el.dom;
+           pos = 'below'
        }
        
        
-       Roo.log(['getTargetFromEvent', ctarget]);
-       return ctarget;
+       //Roo.log(['getTargetFromEvent', ctarget]);
+       return [ ctarget, pos ];
     },
     
     onNodeEnter : function(n, dd, e, data){
@@ -2281,12 +2291,22 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
     },
     onNodeOver : function(n, dd, e, data)
     {
+//     Roo.log(['onNodeOver'])
+       /*
        var pt = this.getDropPoint(e, n, dd);
        // set the insert point style on the target node
        //var dragElClass = this.dropNotAllowed;
-       if (pt) {
-           Roo.log(pt);
+       if (!pt) {
+           this.dropPlaceHolder('hide');
+           return false;
+           
        }
+       */
+       target_info = this.getTargetFromEvent(e);
+       Roo.log(['getTargetFromEvent', target_info[0].el.dom.id,target_info[1]]);
+       
+       
+       this.dropPlaceHolder('show', targetinfo,data);
        return false; //dragElClass;
     },
     onNodeOut : function(n, dd, e, data){
@@ -2327,7 +2347,10 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
     /**        Decide whether to drop above or below a View node. */
     getDropPoint : function(e, n, dd)
     {
-       if (n == this.bodyEl.dom) {
+       if (dd) {
+           return false;
+       }
+       if (n == this.bodyEl.dom) {
                return "above";
        }
        var t = Roo.lib.Dom.getY(n), b = t + n.offsetHeight;
@@ -2352,6 +2375,27 @@ Roo.extend(Roo.bootstrap.Card, Roo.bootstrap.Component,  {
        this.collapsed = true;
        
        
+    },
+    dropPlaceHolder: function (action, where_ar, data)
+    {
+       if (this.dropEl === false) {
+           this.dropEl = new Roo.DomHelper.append(this.dom.bodyEl, {
+               cls : 'd-none'
+           });
+       }
+       
+       if (action == 'hide') {
+           this.dropEl.removeClass(['d-none', 'd-block']);
+           this.dropEl.addClass('d-none');
+           return;
+       }
+       var cardel = where_ar[0].el.dom;
+       var dropEl
+       
+       
+       
+       
+       
     }
 
     

diff --git a/roojs-bootstrap.js b/roojs-bootstrap.js
index e73c5b8..7fe91a7 100644 (file)
--- a/roojs-bootstrap.js
+++ b/roojs-bootstrap.js
@@ -91,12 +91,14 @@ if(A.hasClass('d-none')){A.removeClass('d-none');}return A;},getChildContainer:f
 );this.dragZone.getDragData=this.getDragData.createDelegate(this);}if(this.dropable){this.dropZone=new Roo.dd.DropZone(this.getChildContainer(),{containerScroll:true,ddGroup:this.drop_group||'default_card_drag_group'});this.dropZone.getTargetFromEvent=this.getTargetFromEvent.createDelegate(this);
 this.dropZone.onNodeEnter=this.onNodeEnter.createDelegate(this);this.dropZone.onNodeOver=this.onNodeOver.createDelegate(this);this.dropZone.onNodeOut=this.onNodeOut.createDelegate(this);this.dropZone.onNodeDrop=this.onNodeDrop.createDelegate(this);}if(this.collapsable){this.el.select('.card-header',true).on('click',this.onToggleCollapse,this);
 }},getDragData:function(e){var A=this.getEl();if(A){var B={source:this,copy:false,nodes:this.getEl(),records:[]};B.ddel=A.dom;Roo.log(A.getWidth());B.ddel.style.width=A.getWidth()+'px';return B;}return false;},getTargetFromEvent:function(e){var A=e.getTarget();
-while((A!==null)&&(A.parentNode!=this.bodyEl.dom)){A=A.parentNode;}var B=false;var C=[];for(var i=0;i<this.items.length;i++){if(this.items[i].xtype!='Card'){continue;}C.push(this.items[i].el.dom);if(A==this.items[i].el.dom){B=A;}}if(!B){B=C[C.length-1]||this.el.dom;
-}Roo.log(['getTargetFromEvent',B]);return B;},onNodeEnter:function(n,dd,e,A){return false;},onNodeOver:function(n,dd,e,A){var pt=this.getDropPoint(e,n,dd);if(pt){Roo.log(pt);}return false;},onNodeOut:function(n,dd,e,A){},onNodeDrop:function(n,dd,e,A){return false;
-if(this.fireEvent("drop",this,n,dd,e,A)===false){return false;}var pt=this.getDropPoint(e,n,dd);var B=(n==this.bodyEl.dom)?this.items.length:n.nodeIndex;if(pt=="below"){B++;}for(var i=0;i<this.items.length;i++){var r=this.items[i];if(dup&&(dd!=this.dragZone)){Roo.fly(this.getNode(this.store.indexOf(dup))).frame("red",1);
-}else{if(A.copy){this.store.insert(B++,r.copy());}else{A.source.isDirtyFlag=true;r.store.remove(r);this.store.insert(B++,r);}this.isDirtyFlag=true;}}this.dragZone.cachedTarget=null;return true;},getDropPoint:function(e,n,dd){if(n==this.bodyEl.dom){return "above";
-}var t=Roo.lib.Dom.getY(n),b=t+n.offsetHeight;var c=t+(b-t)/2;var y=Roo.lib.Event.getPageY(e);if(y<=c){return "above";}else{return "below";}},onToggleCollapse:function(e){if(this.collapsed){this.el.select('.roo-collapse-toggle').removeClass('collapsed');this.el.select('.roo-collapsable').addClass('show');
-this.collapsed=false;return;}this.el.select('.roo-collapse-toggle').addClass('collapsed');this.el.select('.roo-collapsable').removeClass('show');this.collapsed=true;}});
+while((A!==null)&&(A.parentNode!=this.bodyEl.dom)){A=A.parentNode;}var B=false;var C=[];var D=pos=false;for(var i=0;i<this.items.length;i++){if(!this.items[i].el.hasClass('card')){continue;}pos=this.getDropPoint(e,this.items[i].el.dom);C.push(this.items[i]);
+if(pos=='above'){B=this.items[i>0?i-1:0];pos=i>0?'below':pos;break;}}if(!B){B=C[C.length-1]||this.el.dom;pos='below'}return [B,pos];},onNodeEnter:function(n,dd,e,A){return false;},onNodeOver:function(n,dd,e,A){target_info=this.getTargetFromEvent(e);Roo.log(['getTargetFromEvent',target_info[0].el.dom.id,target_info[1]]);
+this.dropPlaceHolder('show',targetinfo,A);return false;},onNodeOut:function(n,dd,e,A){},onNodeDrop:function(n,dd,e,A){return false;if(this.fireEvent("drop",this,n,dd,e,A)===false){return false;}var pt=this.getDropPoint(e,n,dd);var B=(n==this.bodyEl.dom)?this.items.length:n.nodeIndex;
+if(pt=="below"){B++;}for(var i=0;i<this.items.length;i++){var r=this.items[i];if(dup&&(dd!=this.dragZone)){Roo.fly(this.getNode(this.store.indexOf(dup))).frame("red",1);}else{if(A.copy){this.store.insert(B++,r.copy());}else{A.source.isDirtyFlag=true;r.store.remove(r);
+this.store.insert(B++,r);}this.isDirtyFlag=true;}}this.dragZone.cachedTarget=null;return true;},getDropPoint:function(e,n,dd){if(dd){return false;}if(n==this.bodyEl.dom){return "above";}var t=Roo.lib.Dom.getY(n),b=t+n.offsetHeight;var c=t+(b-t)/2;var y=Roo.lib.Event.getPageY(e);
+if(y<=c){return "above";}else{return "below";}},onToggleCollapse:function(e){if(this.collapsed){this.el.select('.roo-collapse-toggle').removeClass('collapsed');this.el.select('.roo-collapsable').addClass('show');this.collapsed=false;return;}this.el.select('.roo-collapse-toggle').addClass('collapsed');
+this.el.select('.roo-collapsable').removeClass('show');this.collapsed=true;},dropPlaceHolder:function(A,B,C){if(this.dropEl===false){this.dropEl=new Roo.DomHelper.append(this.dom.bodyEl,{cls:'d-none'});}if(A=='hide'){this.dropEl.removeClass(['d-none','d-block']);
+this.dropEl.addClass('d-none');return;}var D=B[0].el.dom;var E}});
 // Roo/bootstrap/CardHeader.js
 Roo.bootstrap.CardHeader=function(A){Roo.bootstrap.CardHeader.superclass.constructor.call(this,A);};Roo.extend(Roo.bootstrap.CardHeader,Roo.bootstrap.Element,{container_method:'getCardHeader'});
 // Roo/bootstrap/CardImageTop.js