Styling dragging element

[mss71]

Needs the element being dragged to be solid and to have box-shadow. Even though i have given it in the dragClass, its not taken. But background color and other css are taken. Is there anyway to do it?

[websanova]

I'm having same issue.

I see this is a browser/HTML5 limitation.

But I see some solutions for cloning an actual copy of the element,.

Would be nice to have some option for this.

[rw355]

Seems achievable via DataTransfer.setDragImage()

https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setDragImage

[GitOfSander]

You can turn off html5 drag and drop by turning on forceFallback forceFallback: true,

Take a look at the options

[owen-m1]

forceFallback: true is only way.

[courtyenn]

@owen-m1 I am trying to change the opacity, to opacity: 1 of the element being dragged and I am using forceFallback: true but it won't change? Do you know why this is?

https://jsbin.com/jogepozale/1/edit?html,css,js,console,output

[courtyenn]

I just edited my post with a jsbin

[courtyenn]

@owen-m1 the jsbin before wasn't working. I updated the link to the one that does work: https://jsbin.com/jogepozale/1/edit?html,css,js,console,output

[owen-m1]

@courtneynguyen Update to the latest Sortable (1.10.0-rc3) and use the onStart method to set the opacity in Sortable.ghost.

JSBin: https://jsbin.com/tilagavugo/1/edit?css,js,output

[courtyenn]

@owen-m1 I'm not seeing a live example of your suggestion with the JSBin link. I see my old code. I would appreciate a live example. Thank you for your help on this! Also what was causing the opacity to be transparent?

[owen-m1]

@courtneynguyen Sorry, it must have not saved. This one should work: https://jsbin.com/xovadop/1/edit?css,js,output

Sortable is setting the opacity here.

[courtyenn]

Why is Sortable setting the opacity? Curious if it is styling should be enforced with Sortable?

[owen-m1]

@courtneynguyen It probably shouldn't be setting the styling but that's the way it was when I took over the project... haven't removed it (yet). Maybe there will be an option for it.

[robinhe]

@courtneynguyen Shown as below, there are two items here, the third one is from clone when you start drag the second one. So you need set forceFallback: true and then set style like this .sortable-drag { opacity: 1 !important } to overwrite its original style.

[Vl4dimyr]

forceFallback: true is NOT necessary in my opinion, here is how I did it:

I used the ondragstart event on the item that is going to be dragged. And used setDragImage in the event listener: event.dataTransfer.setDragImage(element, 0, 0) with element being the styled element for dragging.

[bitflower]

@Vl4dimyr Do you mean the onStart of sortablejs or the native event? Can you share some details? Would be much appreciated!

[3zzy]

@bitflower Yes, so something like this: e.originalEvent.dataTransfer.setDragImage(element, 0, 0);

[tylernathanreed]

Just a personal discovery of mine while trying to modify the ghost element myself (using fallback mode).

If you're sorting with a table, you'll need to include .sortable-drag { display: table } as the element uses display: block by default.