0 Replies Latest reply on Oct 15, 2015 1:13 PM by jeffs80317941

    Unbinding buttons click, when draggin div.

    jeffs80317941

      I have 3 draggable divs to display products in my composition, they work great and have a min and ax draggable area, however what i want to do now is put content in those divs that has click functions on them. However when ever i drag the div now, the click event triggers on the internal buttons after i release the drag. I would like to unbind the click event when the dragging starts , and rebind when dragging ends, but I cant figure out how. here is my code thus far.

       

      Creaton Complete:

      //ready to drag and drop.
      //get jQuery handle from {Symbol|jQuery Handle|String}
      Edge.getJQHandle = function(target){
        var handle;
        if(target instanceof Symbol){
          handle = target.getSymbolElement();  //case Symbol
        }else if(parseInt(target.length)>1){
          handle = target;                     //case jQuery handle
        }else{
          handle = $(target);                  //case else(suppose string :p)
        }
        return handle;
      }
      
      //extend Edge's Symbol method
      Symbol.prototype.draggableX = function(opt){
          Edge.getJQHandle(this).draggableX(opt);
      };
      
      //extend jQuery func
      //get CSS left
      $.fn.getLeftPx = function(){
        var left = this.css("left");
        var isPx = left.indexOf("%")==-1 && !isNaN(parseInt(left));
        if(isPx==true){
          left = parseInt(left);
        }else{
          //case of use "%" or not use "left";
          var oldLeft = this.offset().left;
          this.css("left","0px");
          left =  oldLeft-this.offset().left;
          this.css("left",oldLeft+"px");
        }
        return left;
      };
      //add draggable feature
      $.fn.draggableX = function(opt){
        var opt = opt||{};
        opt.target=(opt.target)?Edge.getJQHandle(opt.target):null;
        var ddData={
          oldPageX:0,
          oldPageY:0,
          gapx:0,
          maxX:(opt.maxX==null)?$(window).width():opt.maxX,
          minX:(opt.minX==null)?-$(window).width():opt.minX,
          me:null,
          clickDist:opt.clickDist || 10,    //distance for judge "click or drag?"
          target:opt.target || null,
          drag:function(e){
            //touchend has no pos Data lol.so,keep the pos data in touchmove event.
            e.preventDefault();
            e=(e.originalEvent.touches&&e.originalEvent.touches[0])||e;
            ddData.lastX = e.pageX;
            ddData.lastY = e.pageY;
            var x = ddData.lastX-ddData.gapx;
            if(x>=ddData.minX && x<=ddData.maxX){
              ddData.target.css("left",x+"px");
              ddData.ondrag(e);
            }
          },
          drop:function(e){
            e.preventDefault(); 
            e=(e.originalEvent.touches&&e.originalEvent.touches[0])||e; 
            //unbind events
            $(window)
              .unbind("mousemove",ddData.drag).unbind("touchmove",ddData.drag)
              .unbind("mouseup",ddData.drop).unbind("touchend",ddData.drop);
            //calc drag distance, judge "click or drag?"
            var dx=ddData.lastX-ddData.oldPageX;
            var dy=ddData.lastY-ddData.oldPageY;
            var dist=Math.sqrt(dx*dx+dy*dy);
            if(dist<ddData.clickDist){
              ddData.onclick(e);
            }else{
              e.direcX = (dx>0)?"right":"left";
              ddData.ondrop(e);
            } 
          },
          onclick:opt.onclick||function(e){},
          ondown:opt.ondown||function(e){},
          ondrag:opt.ondrag||function(e){},
          ondrop:opt.ondrop||function(e){}            
        };
        return this.each(function(){
          var me = $(this);
          var down = function(e){
            ddData.ondown(e);
            e.preventDefault();
            e=(e.originalEvent.touches&&e.originalEvent.touches[0])||e;
            ddData.me = me;
            ddData.oldPageX = ddData.lastX = e.pageX;
            ddData.oldPageY = ddData.lastY = e.pageY;
            ddData.target = ddData.target || me;
            ddData.gapx = e.pageX-ddData.target.getLeftPx();
            ddData.bindTarget = $(window);
            //bind events
            $(window)
            .bind("mousemove",ddData,ddData.drag).bind("touchmove",ddData,ddData.drag)
            .bind("mouseup",ddData,ddData.drop).bind("touchend",ddData,ddData.drop);
            ddData.drag(e);
          }
          me.bind("touchstart",ddData,down).mousedown(ddData,down);
        });
      }
      

       

      And then on my Composition Ready I bind the draggable feature to my 3 divs onthe stage:

       

      sym.$("ScrollPane12").draggableX({minX:-500,maxX:0});
      sym.$("ScrollPane22").draggableX({minX:-500,maxX:0});
      sym.$("ScrollPane32").draggableX({minX:-500,maxX:0});
      

       

      That all works great, but now i place buttons with on click events inside the divs, and the issue begins.

       

      I tried to create a variable and if else statement and place the trigger throughout the creation complete code to trigger then event but to no avail. Either the dragging breaks completely or the the if else statement doesn't even fire and my dragging works with the same conflict with the buttons persisting. I am calling the button elements by the class name 'thumbnail' that i applied tot hem in edge.

       

      My If else statement and variable declaration:

      var isdragging = false;
      if (isdragging == true){
      sym.getSymbol("ScrollPane12").getElementsByClassName('thumbnail').unbind("click");
      sym.getSymbol("ScrollPane22").getElementsByClassName('thumbnail').unbind("click");
      sym.getSymbol("ScrollPane32").getElementsByClassName('thumbnail').unbind("click");
      console.log('batman true');
      }
      else {
      sym.getSymbol("ScrollPane12").getElementsByClassName('thumbnail').bind("click");
      sym.getSymbol("ScrollPane22").getElementsByClassName('thumbnail').bind("click");
      sym.getSymbol("ScrollPane32").getElementsByClassName('thumbnail').bind("click");
      console.log('batman false');
      };
      

       

      Can anyone help me figure out how to unbind and then rebind the click event on the internal buttons (by calling a class name applied to all buttons of 'thumbnail') based on weather the div is being dragged or not.?

       

      Thanks in advance for any help!

      -Dapper Batman.