Drag and drop: Restriced dragging area

  • Shadowsong
  • Born
  • Born
  • Shadowsong
  • Posts: 4
  • Loc: jamaica

Post 3+ Months Ago

Dear AnyoneWho'sWillingToHelpOrCan,

I've created a button or movie clip [in this case it doesn't seem to matter] and i want to be able to drag it from its initial location [say, 0,0] to any point within a designated area.

Now, here's why this is different; this... designated area, is not u're average quadrilateral, it's an irregular shape - like a trapezium with it's slant side; a curved line not a straight line.

My problem is that i'm unable to restrict the dragging of the button/movie clip with startDrag(target,true) or with startDrag(true,left,top,right,bottom)

I would REALLy appreciate any sort of help where constraining an Object's drag area is concerned. [especially if that drag area is an irregular shape] :-(
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

I'm thinking something like:
Code: [ Select ]
button.onPress = function() {
  startDrag(this);
  if(this.hitTest(polygon)===false){
   stopDrag;
  }
}
button.onRelease = function() {
  stopDrag;
}
  1. button.onPress = function() {
  2.   startDrag(this);
  3.   if(this.hitTest(polygon)===false){
  4.    stopDrag;
  5.   }
  6. }
  7. button.onRelease = function() {
  8.   stopDrag;
  9. }
  • Shadowsong
  • Born
  • Born
  • Shadowsong
  • Posts: 4
  • Loc: jamaica

Post 3+ Months Ago

Hey thanks!!! I really appreciate ur input digitalMedia. However, that effect is not... quite what i had in mind. Using
Code: [ Select ]
if(this.hitTest(polygon) === false)
  stopDrag;
  1. if(this.hitTest(polygon) === false)
  2.   stopDrag;
ensures only, that if I let go of the button somewhere outside of the drag area [i.e. the polygon] the object will stay there. What i would love; is if i weren't able to get outside the drag area in the first place. :( :?
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Actually, the part of the code you quoted is only on the "onPress" event. (I think you'd actually want to wrap it in the "onEnterFrame" event, as well, so it fired with every frame. Then you'd want to delete that event onRelease), so if the hitTest didn't resolve as true, the button drops automatically.

You could make the area to hitTest against and invisible object, contained inside the polygon, then have your polygon as a visual part only.

I wasn't trying to GIVE you a solution, just an idea towards a solution.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

I tried this with mCs' named "square" & "oval", square was confined to oval, but it looses properties like _droptarget :(
Code: [ Select ]
MovieClip.prototype.confineDrag = function(guide){
    this.onPress = function(){
        this.onMouseMove = function(){/*using mouse instead of enterFrame saves CPU on mouse idle*/
            if(guide.hitTest(_xmouse,_ymouse,true)){/*this use of hitTest compares _xmouse & _ymouse to cordinates of paramater "guide" which is a movieClip passed to the prototype, true tells flash to evaluate the actual shape of the guide instead of just the bounding rectangle.*/
                this._x = _xmouse;/*place this at xmMouse if hitTest returns true*/
                this._y = _ymouse;
            }
        }
    }
    this.onRelease = function(){
        delete this.onMouseMove;/*delete mouseMove event, this may need to be called onReleaseOutside as well, "this.onRelease=this.onReleaseOutside= function()" */
    }
}
square.confineDrag(_root.oval);/*apply prototype to square with oval as hitTest guide*/
  1. MovieClip.prototype.confineDrag = function(guide){
  2.     this.onPress = function(){
  3.         this.onMouseMove = function(){/*using mouse instead of enterFrame saves CPU on mouse idle*/
  4.             if(guide.hitTest(_xmouse,_ymouse,true)){/*this use of hitTest compares _xmouse & _ymouse to cordinates of paramater "guide" which is a movieClip passed to the prototype, true tells flash to evaluate the actual shape of the guide instead of just the bounding rectangle.*/
  5.                 this._x = _xmouse;/*place this at xmMouse if hitTest returns true*/
  6.                 this._y = _ymouse;
  7.             }
  8.         }
  9.     }
  10.     this.onRelease = function(){
  11.         delete this.onMouseMove;/*delete mouseMove event, this may need to be called onReleaseOutside as well, "this.onRelease=this.onReleaseOutside= function()" */
  12.     }
  13. }
  14. square.confineDrag(_root.oval);/*apply prototype to square with oval as hitTest guide*/


//Edit, added comments :P
  • Shadowsong
  • Born
  • Born
  • Shadowsong
  • Posts: 4
  • Loc: jamaica

Post 3+ Months Ago

:shock: U guys really ARE stars... I'm in complete awe.

digitalMedia: THANK U
joebert: THANK U

Well, I kinda sorta got it working I used exactly what joebert suggested.

thanx again guys.

Code: [ Select ]
MovieClip.prototype.confineDrag = function(guide) {
  this.onPress = function(){
   this.onMouseMove = function(){
     if(guide.hitTest(_xmouse,_ymouse,true)){
      this._x = _xmouse;
      this._y = _ymouse;
     }
   }
  }
  this.onRelease = this.onReleaseOutside = function(){
   delete this.onMouseMove;
  }
}

btn.confineDrag(_root.polygon);
  1. MovieClip.prototype.confineDrag = function(guide) {
  2.   this.onPress = function(){
  3.    this.onMouseMove = function(){
  4.      if(guide.hitTest(_xmouse,_ymouse,true)){
  5.       this._x = _xmouse;
  6.       this._y = _ymouse;
  7.      }
  8.    }
  9.   }
  10.   this.onRelease = this.onReleaseOutside = function(){
  11.    delete this.onMouseMove;
  12.   }
  13. }
  14. btn.confineDrag(_root.polygon);

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 7 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.