How can I handle the click/drag event in a custom container that is in a custom container?

[hsynk]

Hi everyone,

The screen hierarchy is like below,

--------------------------------------------------

View

|-->MyCustomContainer

|------> PopupCustomContainer (under the MyCustomContainer)

------------------------------------------------------------------------------------------------

I can handle the click/drag event in MyCustomContainer which is under the view.

I created another custom container that is a pop-up screen to show on MyCustomContainer. I want to handle the click-and-drag event in PopupCustomContainer but can't.

View::handleClickEvent(evt);
cntAirConditioner.handleClickEvent(evt); // my custom container that have a custom container.

In the view screen, I called these functions but in this situation, the events are triggered twice on MyCustomContainer. If I just call the "View::handleClickEvent(evt)", I can handle the events in my custom container but I can't handle the other custom container which is in my custom container.

I hope the explanation is clear.

Thanks for your help.

[JTP1]

Maybe you must open this problem little bit more... which container is clicked/dragged and what should happen then.:D

[JThom.13]

To handle click and drag events in a custom container within another custom container, you can implement event listeners on the child container that captures the event and performs the desired action.

Here are the basic steps to implement this:

1. Add event listeners to the child container element using JavaScript or a JavaScript framework such as jQuery. For example, to add a click event listener, you can use the following code:

var childContainer = document.getElementById("childContainer");
childContainer.addEventListener("click", handleClick);

Similarly, to add a drag event listener, you can use the following code:

childContainer.addEventListener("dragstart", handleDragStart);
childContainer.addEventListener("drag", handleDrag);
childContainer.addEventListener("dragend", handleDragEnd);

1. Define the functions to handle the events. For example, the handleClick function could be implemented as follows:

function handleClick(event) {
  // Perform action when the child container is clicked
}

And the handleDragStart, handleDrag, and handleDragEnd functions could be implemented as follows:

function handleDragStart(event) {
  // Perform action when a drag operation starts on the child container
}
 
function handleDrag(event) {
  // Perform action while the child container is being dragged
}
 
function handleDragEnd(event) {
  // Perform action when a drag operation ends on the child container
}

Finally, you may also need to prevent event propagation to the parent container, depending on your requirements. For example, to prevent a click event from propagating to the parent container, you can use the following code:

function handleClick(event) {
  event.stopPropagation();
  // Perform action when the child container is clicked
}

Similarly, to prevent a drag event from propagating to the parent container, you can use the following code:

function handleDragStart(event) {
  event.stopPropagation();
  // Perform action when a drag operation starts on the child container
}
 
function handleDrag(event) {
  event.stopPropagation();
  // Perform action while the child container is being dragged
}
 
function handleDragEnd(event) {
  event.stopPropagation();
  // Perform action when a drag operation ends on the child container
}

These are the basic steps to handle click and drag events in a custom container within another custom container. Of course, the specific implementation details may vary depending on your requirements and the technology stack you are using.

[Osman SOYKURT · Accepted solution]

Hello hsynk,

Make sure you checked the correct mixins on the elements you want, for example, if you want to drag only a certain image inside a custom container inside another custom container, then you need to check the draggable mixin for the image, and only the image.

Also, I wouldn't recommend using the ClickListener for an entire custom container: a defined clickable area must be defined in order to prevent layers of clickable areas which will lead to confusion for you and the program.

You'll find attached a small example to illustrate what I mean 🙂

/Osman

PS : I would probably use one custom container and one modal window instead of two custom containers, especially if you want to create a "pop-up" screen.