Mirror / clone js properties in the dragging process

[GRBurst]

Hey there, thanks for this amazing library.

When a draggable item is dragged, the following happens afaik:

• A copy of the corresponding html element is created at the original source position, indicating the origninal position (*)
• The original element is hidden
• A mirror element is created to create a nice preview of the the item being dragged

If the original element contains JS properties, these properties are not accessible during the dragging-process.

In my use case, I want to apply changes on the source element when dragging it onto another element. However, I cannot read the properties of the original element using the DragOverEvent, so it is not possible to drag it onto its own, since the over method does only return the copied element.

To circumvent this problem, I am using attributes for now, but using properties would be beneficial (e.g. for performance reason).

Kind regards

[beefchimi]

@GRBurst Again I have to apologize for the late reply.

Can you elaborate on properties? Also, maybe there is a scenario you can describe for me? (what things about the "over" element need to be transferred to the "source").

Codepen's (or any code demo) are always welcome 😄 just helps us understand the problem more quickly.

Sorry about for the delays.

cc/ @tsov

[tsov]

@GRBurst I am also not 💯 sure I get the issue.

There are three elements that matter during a drag operation

• originalSource which is the original element that gets copied and is hidden while dragging
• source which is a copy of the original source and get moved around as you sort things (it's the placeholder)
• mirror which is a copy of the original source element and follows your cursor while dragging

You'll want to change styles for mirror and source during a drag operation and change styles for originalSource at the end of a drag operation.

Let us know if you need to more pointers

[GRBurst]

Thanks for the responses.

I am talking about properties of js Objects.

When I have an dom element, there is a representation in javascript that I get, e.g. when using getElementById. So when I set additional properties on that Object, these are applied on the javascript Object:

var elem = documents.getElementById("specialDragItem")
elem.specialProperty = "awesome"

In the case I want to read out this element with javascript during a dragging process, this works fine except for the element I am dragging. This is because the original element is hidden and I get events on the cloned source element, instead of the original element. I think that the specialProperty is not copied to the source element.

I do not want serialize properties into Strings by using html attributes but want to work on the objects directly. It would be nice if this can be added by an Option to copy all properties of the js Object.

I will try to make a short example/fiddle in the next days to further illustrate my issue.

[diptigajjar]

@tsov @beefchimi I'm new to this library and facing issue with clone element. I'm trying to use mirror element but no success. Can you explain how can i keep my original element to it's own place and drag and drop it's mirror element on drop area? I was trying that in existing codepan example https://codepen.io/pachecoder/pen/xPKNmg

[fdietze]

@diptigajjar A workaround is to listen to drag:start and copy your required properties from originalSource to mirror:

// untested code:
draggable.on("drag:start", e =>
  e.mirror.myProperty = e.originalSource.myProperty
)

It would be nice to have an option in Draggable, to specify an array of property-names as strings which will be copied automatically (on drag:start) to the mirror element.

[jhull]

@diptigajjar @tsov @beefchimi strangely enough - this is exactly what I'm trying to do as well. Once the draggable item gets dropped it disappears from its original location--which I understand is the intended purpose. But for my case, I'd like to keep a list of permanent items that can be dragged and dropped several times.

[fdietze]

@narrative1st sounds like you are using Droppable and should be using Draggable instead.

[jhull]

That could be true - I figured out how to get what I wanted with Droppable but then cancelling the drop event when droppable:dropped is fired off. But I can't find example where I can catch what container the dragged event is drag:stop in...(and if it's stopped outside of a container)

[diptigajjar]

@fdietze @narrative1st yes that's what I'm trying to achieve but don't have any idea how to do it.

[fdietze]

@narrative1st @diptigajjar does https://github.com/Shopify/draggable/issues/263#issuecomment-413148571 help?

[diptigajjar]

@fdietze looks like that is something which perhaps works. I'll give it a try

[sharansirius]

@diptigajjar Any luck with https://codepen.io/pachecoder/pen/xPKNmg ? @beefchimi how to achieve this. I am also looking for the same.

[nsarvar]

@GRBurst I am also not 💯 sure I get the issue.

There are three elements that matter during a drag operation

• originalSource which is the original element that gets copied and is hidden while dragging
• source which is a copy of the original source and get moved around as you sort things (it's the placeholder)
• mirror which is a copy of the original source element and follows your cursor while dragging

You'll want to change styles for mirror and source during a drag operation and change styles for originalSource at the end of a drag operation.

Let us know if you need to more pointers

I want to apply transform:rotate(10deg) for mirror, but it is not working as mirror already has another transform style which is overriding my style. How can I do that? Thanks

[zjffun]

@nsarvar If you don't mind an extra wrapper DOM, you can try https://codepen.io/1010543618/pen/qBNRwZK