Skip to main content
Participating Frequently
February 20, 2021
Answered

Highlight target area when dragging objects on it

  • February 20, 2021
  • 1 reply
  • 770 views

Hi

 

I'm converting a flash test to html canvas. It's a drag and drop test. I need to drag the character to the right room. When users dragging the character to the rooms, I want to highlight the room when dragging character on it. 

 

I used the mouseover and mouseout within drag function but it didn't work out. How can I solve this problem? 

 

Thank you!

 

 

    This topic has been closed for replies.
    Correct answer kglad

    Hi kglad,

     

    The code I uploaded has some error, here is my new code about highlight:

    root.stageMouseMoveHandler = function(e)
    {
    	if (pieces.target)
    	{
    		pieces.target.x = (e.stageX / stage.scaleX) - pieces.target.offsetX;
    		pieces.target.y = (e.stageY / stage.scaleY) - pieces.target.offsetY;
    		
    		var test = slots.getObjectUnderPoint(pieces.target.x, pieces.target.y);
    		root.targetHighlightOn();
    	}	
    };
    
    
    root.targetHighlightOn = function()
    {
    	var highlight = slots.getObjectUnderPoint(pieces.target.x, pieces.target.y);
    		
    		if (!highlight){
    						
    /*			slots.children.forEach(function(child, index){
    				child.gotoAndStop(0);
    				});*/
    			
    			return;
    			}
    		
    		root.highlightOn = highlight.parent.parent;
    		
    		root.highlightOn.gotoAndPlay(1);
    }

    Now it can highlight the area by playing the highlight movieclip. But I don't know how to stop the movieclip when dragging objects out of the area.

     

     

     


    try:

     

    root.targetHighlightOn = function()
    {
    var highlight = slots.getObjectUnderPoint(pieces.target.x, pieces.target.y);
    if (!highlight){

    if(root.highlightOn){

    root.highlightOn.gotoAndStop(0);

    root.highlightOn = nul;

    }
    } else {
    root.highlightOn = highlight.parent.parent;

    root.highlightOn.gotoAndPlay(1);

    }
    }

    1 reply

    kglad
    Community Expert
    Community Expert
    February 20, 2021

    you need to convert all your actionscript to createjs/javascript.

    Participating Frequently
    February 20, 2021

    I did. The drag and drop works fine. Just don't know how to highlight the area.

    Here is my code, mouseover and mouseout doesn't workout.

     

    var root = this;
    var pieces = root.pieces;
    var slots = root.slots;
    var restart = root.restart;
    
    
    root.setup = function()
    {
    	createjs.Touch.enable(stage);
    	stage.mouseMoveOutside = true;
    	root.drawStart = stage.on("drawstart", root.start, null, true);
    };
    
    root.start = function(e)
    {
    	stage.off("drawstart", root.drawStart);
    /*	winMessage.originalY = winMessage.y;
    	*/
    	pieces.on("mousedown", root.mouseDownHandler);	
    };
    
    
    
    root.mouseDownHandler = function(e)
    {
    	e.currentTarget.setChildIndex(e.target, e.currentTarget.children.length - 1);
    	e.target.offsetX = (e.stageX / stage.scaleX) - e.target.x;
    	e.target.offsetY = (e.stageY / stage.scaleY) - e.target.y;
    	pieces.target = e.target;
    	root.stageMouseMove = stage.on("stagemousemove", root.stageMouseMoveHandler);
    	root.stageMouseUp = stage.on("stagemouseup", root.stageMouseUpHandler);
    };
    
    root.stageMouseMoveHandler = function(e)
    {
    	if (pieces.target)
    	{
    		pieces.target.x = (e.stageX / stage.scaleX) - pieces.target.offsetX;
    		pieces.target.y = (e.stageY / stage.scaleY) - pieces.target.offsetY;
    		
    		var frequency = 15;
    		stage.enableMouseOver(frequency);
    
    		this.pieces.addEventListener("mouseover", fl_MouseOverHandler_9);
    		this.pieces.addEventListener("mouseout", fl_MouseOutHandler_3);
    
    	}	
    };
    
    
    function fl_MouseOverHandler_8()
    {
    	root.test.gotoAndPlay(1);
    	console.log("In");
    }
    
    
    
    
    function fl_MouseOutHandler_3()
    {
    	root.test.gotoAndStop(0);
    	console.log("Out");
    }
    
    
    root.stageMouseUpHandler = function(e)
    {
    	stage.off("stagemousemove", root.stageMouseMove);
    	stage.off("stagemouseup", root.stageMouseUp);
    	
    	if (pieces.target)
    	{
    		root.check();
    		pieces.target = null;
    		
    		
    	}	
    };
    
    
    
    root.check = function()
    {
    	
    	
    	var spot = root.getObjectUnderPoint(pieces.target.x, pieces.target.y);
    	
    	if (!spot)
    		return;
    	
    	root.slot = spot.parent.parent;
    
    	console.log(spot);
    	console.log(root.slot.name);
    	
    };
    
    
    root.setup();
    kglad
    Community Expert
    Community Expert
    February 21, 2021

    what code is "trying" to highlight the area?