I have the current structure in React

var Component = React.createClass({
_testOver:function(){
    console.log("Do action on hover");
},
_testOut: function(){
    console.log("Do action on out");
},
render: function(){
    return <div style={display:"none"}>
               <div className="container"
                    onDragEnter={this._testOver}
                    onDragLeave={this._testOut}
                    style={{height:"400px",
                            paddingTop:"100px",
                            backgroundColor:"red"}}>
                    <div className= "child" style={{height:"200px",
                                 backgroundColor:"blue"}}>
                         TESTING
                    </div>
                </div>
           </div>
}
});

When dragging something over the container, _testOver() event will fire. Hovever, when keep dragging onto the child, the _testOut() event will fire and at the same time, another _testOver() is fired.

I understand that it happens like that because technically the mouse is dragged out of the container and into the child (which is still inside the container, hence firing another _testOver() event)

My question is: is there a way to stop the events from firing when moving from the parent to the child( or child's child ). i.e. _testOver will only fire when we drag anything onto the container and _testOut will only fire when we drag it out of container. _testOut should not fire when moving from container to child

Thanks!

I have the current structure in React

var Component = React.createClass({
_testOver:function(){
    console.log("Do action on hover");
},
_testOut: function(){
    console.log("Do action on out");
},
render: function(){
    return <div style={display:"none"}>
               <div className="container"
                    onDragEnter={this._testOver}
                    onDragLeave={this._testOut}
                    style={{height:"400px",
                            paddingTop:"100px",
                            backgroundColor:"red"}}>
                    <div className= "child" style={{height:"200px",
                                 backgroundColor:"blue"}}>
                         TESTING
                    </div>
                </div>
           </div>
}
});

When dragging something over the container, _testOver() event will fire. Hovever, when keep dragging onto the child, the _testOut() event will fire and at the same time, another _testOver() is fired.

I understand that it happens like that because technically the mouse is dragged out of the container and into the child (which is still inside the container, hence firing another _testOver() event)

My question is: is there a way to stop the events from firing when moving from the parent to the child( or child's child ). i.e. _testOver will only fire when we drag anything onto the container and _testOut will only fire when we drag it out of container. _testOut should not fire when moving from container to child

Thanks!

• javascript
• reactjs

3 Answers 3

Found the answer :). Ultimately this is more of a javascript/jquery question, rather than a react question. Answer is gotten from HTML5 dragleave fired when hovering a child element.

For it to work with React, just add the logic in ponentDidMount so we can attach dragenter/dragleave on our container when it is rendered

...
ponentDidMount: function(){
    var thisComponent = this;
    var counter = 0;

    $(this.refs.container).bind({
        dragenter: function(ev) {
            ev.preventDefault(); // needed for IE
            counter++;
            thisComponent._testOver();
        },

        dragleave: function() {
            counter--;
            if (counter === 0) { 
                thisComponent._testOut();
            }
        }
    });
},
...

  const handleDragEnter = (e) => {
    e.preventDefault();
    e.stopPropagation();
    setDragActive(true);
  };

  const handleDragLeave = (e) => {
    e.preventDefault();
    e.stopPropagation();
    const { relatedTarget } = e;
    if (!relatedTarget || !e.currentTarget.contains(relatedTarget)) {
      setDragActive(false);
    }
  };

I'm not sure about this would work or not butit's worth a try :

<div className= "child" onDragEnter={this.preventDrag} onDragLeave = {this.preventDrag} style={{height:"200px",
                             backgroundColor:"blue"}}>

preventDrag:function(e){
   e.preventDefault();
   e.stopPropagation();
}

or perhaps you could probably find a work around with state ? Like switching a boolean to true or false wether you're hovering you child or not, and test this boolean before your console.log ?