drop event and default options

[GKatsarov]

Hi, Karen.

First of all, amazing work with that project. I love it, I'm currently using it (or the most part of it) for a big project of my own. I faced two difficulties so far, which I wanted to discuss with you.

1. On the drop event, the drop container doesn't exist, as an argument to the drop function, so I cannot actually catch where I'm dropping a certain element to. It would be great, if such an argument exists, so for example you can move an element between two containers.

2. I cannot seem to find a good solution to removing one of the three options (drag,resize,rotate) as a default behavior when I initialize the library. For example, if I want to use only resize and rotate, it would be great, if in the options I can tell drag:false or something similar, so I do not get the whole functionality. I can simulate on the drag event - return false but still I don't think that is the correct way things should go.

Again I wanted to say, everything is great and I see that you have made wonders with this library! Good luck!

[nichollascarter]

Hi @GKatsarov! Thanks for feedback!

1. Not exactly understand what you mean.
   You want something like "stack" option in '.clone()' method?
   We need to define new option, where we must to specify elements as droppable areas?

2. I think it would be implemented soon.

[GKatsarov]

Yeah, for the first issue the problem is another. So, I will give a more detailed example, I've seen similar libraries in the past, for example, Im sure you know jQuery Draggable + Droppable library. Just so u can make the connection, I will give u an example from there. So in our/your 😆 library, we have

onDrop(e, el) { console.log('is dropped'); },
On this method, we get the two parameters e - for the event and el for the current dragged element. I know I'm probably mixing things up, but I believe it would be great, to manage to catch, for example with a third parameter, the container in which the dragged element is going to be dropped in this onDrop event. Here is an example from the Droppable library. I know this is a "droppable" element and not a draggable one. The easiest thing we can make is define a few containers that have class - droppable or something. I'm totally fine even in not defining anything, just to look to the first element below the mouse in the html on the drop event and use it as "droppable container".

element.droppable({
        drop: function(event, ui) {

            //Here we can use ui.draggable to get the draggable target
            //And we can also use ui.droppable to get the container in which the element is dropped
        }
})

Just to clarify, I'm dragging elements between different containers on an improvised "stage", in which I need to know the container which I currently dropped the element, so I can move the dragged element inside the html to the certain container. That is impossible for me for now. I've been looking into the library to make my own solution but nothing so far.

So for an example, I have an element in cont1, I do the dragging, and I drop the element to the "cont2", as I wrote, to the right, in the following example.

<div id="cont1" style="width:50%;height:100%"><div id="element1"></div></div>
<div id="cont2" style="width:50%;height:100%"></div>

After I drop it, I need to catch the container, so I can move the "physical" element in the html, as in the example. I can move the element myself, as long as I know the container.

<div id="cont1" style="width:50%;height:100%"></div>
<div id="cont2" style="width:50%;height:100%"><div id="element1"></div></div>

This is the final output I need to do.

I hope I cleared the problem I'm facing. Im open for any advice. Thanks in advance!

[nichollascarter]

@GKatsarov, okay, I will take a look the examples and think about how it can/cannot be useful in most cases.