Closed mss71 closed 5 years ago
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.
Seems achievable via DataTransfer.setDragImage()
https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setDragImage
You can turn off html5 drag and drop by turning on forceFallback forceFallback: true,
Take a look at the options
forceFallback: true
is only way.
@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
I just edited my post with a jsbin
@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
@courtneynguyen Update to the latest Sortable (1.10.0-rc3) and use the onStart
method to set the opacity in Sortable.ghost
.
@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?
@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.
Why is Sortable setting the opacity? Curious if it is styling should be enforced with Sortable?
@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.
@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.
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.
@Vl4dimyr Do you mean the onStart
of sortablejs
or the native event? Can you share some details? Would be much appreciated!
@bitflower Yes, so something like this: e.originalEvent.dataTransfer.setDragImage(element, 0, 0);
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.
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?