Drag Start and Drag End

Hi,

In my UI there many different components which can be drad and drop on another respective components. For example, a button, can drop on a delete area to delete etc…,

Now this is my requirement. "
As soon as when user start dragging the button, the delete area should be highlighted immediately. So user can understand that he can drop it on the delete area to delete, then he can drag and drop on delete area. If suppose user stopped dragging, the delete area should display back to the normal.
"

I have understood the Drophandlers and AcceptCriteria. May be for my requirement somehow i want to run accept criterias for all components. If the any components accept criteria is successful should be highligted immeditely.

Please suggest some possible way to satisfy my requirement.

Regards,
Venkat

Venkat-

I use the
DragDropLayouts
for all my drag and drop designs. I have never done what you intend to do, but it seems like you could hack the setDragFilter(). So maybe when the component is selected, not only identify if it draggable but also to push the changes to your UI to highlight your delete area.

layout.setDragFilter(new DragFilter()
{
    private static final long serialVersionUID = 1L;

    @Override
    public boolean isDraggable(Component component)
    {
        // Here is where you should push the UI changes
        if (component instanceof Button)
            highlightDeleteArea();
        
        // Allow the component to be draggable
        return (component instanceof Button);
    }
});

Just a thought, hopefully it works out for you.

Regards,
Eric

Hello Eric,

Thanks for your quick resposne. Unfortunetly I can not able to change all my layouts to the DragAndDropLayouts.
Since it is time for release to my project. I will use the add-on in next release.

Is there any possible way that i can handle this with javascript. Adding dragenter listerner and it has to call severside?

Best Regards,
Venkat.

Venkat-

I still think you can do that using the standard drag and drop wrapper by using the server side drag accept criteria. Use
getAcceptCriterion() to handle the UI changes before the acceptance is sent. I have not tried it, but you may not even have to use push to highlight the delete section (maybe mark the component as dirty though). If all else fails, implement a push thread to handle that highlight update.

I am sure that you have already, but make sure you take a look at the
book
to setup the server accept criteria.

Regards,
Eric

Hi Eric

Thanks once again for quick reply. I can highlight with accept criteria now.
But when user dropped the button somewhere else instead of delete area then how i can make the delete area to normal?

May be i need some kind of dragend event…

Regards,
Venkata

Venkata-

In your drop event, always set the delete area back to its normal look.

Just remember, this is more of a hack because it sounds like you needed something quick. You should definately reevaluate the cost (communications going back and forth) of doing it like this.

Regards,
Eric

Hi Eric,

But the drop() method will execute only when accept criteria returns ‘true’, so i cannot depends on drop() method of all other layouts handler.

Moreover if you drop at empty area of screen there is no event will trigger there.

Best Regards,
Venkat

Venkata-

Unfortunately, I do not know the complexity of your project because I didn’t see any of your code. If it does not work, maybe the next option is to build your own widget for the delete box component or implement a mouse event listener to handle the empty drops or possibly overriding the dd wrapper to handle your specific requirements. There are a lot of options, I just do’t know what your time frame or resources are.

Best regards,
Eric

Hi Eric,

I am sorry for the code. the code is little big to add here. May be i will create a simple application and add it here for reference. As you suggest i will try to override the dd wrapper to know the start or end events of transferable. As you said yes there should be some other options since no direct approch from vaadin. I will workout on your sugession and update you. My time frame may be 1 day.

Best Regards,
Venkat