drag and drop but my text is in the way
I have a webapp where I list a bunch of items, and I decided to make the list drag and drop enabled, but when I try dragging the text gets selected and the drag event doesn't fire unless I already have selected text. How would I make the element drag instead of select the internal text? I tried
stopPropagation() and it did nothing, same with preventDefault()
The project itself is in svelte, but I added here an ugly rudimentary recreation of this part in vanilla js in a codepen, any help at all is appreciated
https://codepen.io/mbaklor/pen/EaxRder?editors=101140 Replies
prevent text selection then
just add
user-select: nonenormally I'd say that's a terrible idea, but drag-and-drop things are one of the few situations where it's justified
I did that on the list element and now I can't drag anything
exactly why i suggested this
then put the text in a span and add that to the span
text selection was the only thing that allowed for some drag events to fire (when dragging selected text)
eh?
I hate drag and drop lol it never does what I want it to
one sec
i just use javascript for it
If you add the draggable attribute to the draggble elements (li) and change the JS selector to [draggable] it resolves the issue.
I am using js for it
one sec I'll try
at least it did in my fork of your code 🤔
.... is this a firefox issue? 😭
can you send the working fork? maybe I did something wrong
this didn't help either btw, it still won't fire the drag event without selected text
just use a pre-existing thing to do this
I was just comparing them - I can't see anything obvious..
https://codepen.io/cbolson/pen/QwWxzZ
you are dragging the text, not the element
the drag and drop is for things like files and text, not elements in the page
I feel like I'm at the precipice of
npm install sortablejsing but I feel like that's overkillno, it isnt
implementing this type of thing yourself will take you to the depths of insanity and drown you
ABSO-FUCKING-LUTELY usr something premade for this
save your sanity and profusely thank the kind souls that wrote this for you to use
does
dragstart not work on divs in general? I was sure it does
yea seems like that's the move lmaofrom what ive seen, the html drag and drop works with content being dragged and dropped
if you select a div, it should drop html
I mean I just need to capture that a drag is happening, the content itself is just the view layer for the user
mdn explicitly states that you have to select the elements with the mouse
aka: select the text and drag
that's weird I remember a while ago making a bad freecell game and it was js drag events for divs iirc, idk maybe I did something different back then
mdn does have an interesting example that does what you want
The difference appears to be in the pug where you defined the draggable
I have specifically defined
li.draggable.label-content(draggable="true")
whereas you defined li.draggable.label-content(draggable)
So yours compiles to <li class="draggable label-content" draggable="draggable"> rather than <li class="draggable label-content" draggable="true">
If I modify your pug with draggable="true" they drag correctly.that last sentencr
sentence
that is the key
i checked the example, you need the attribute
and it does automatically what i said: adds
user-select: none by defaultthis 100% worked
amazing
thanks both of you
you're welcome, sorry i was wrong back there for a second
I'll still use a lib because there's no way this is the last time I shoot my foot here lol
lol i would use one too
now to make a valid drop target 😭
good luck
thanks
we're getting there
my codepen is working my svelte code isn't
cache?
no, things are changing, it just doesn't accept the drop target for some reason
might be a svelte issue at this point
any errors in the console?
nothing
it gets worse lol
it works on the svelte playground
this might be a webview issue which is not something I can handle actually
yeah, that doesnt help at all
Update just for the curious, yeah it seems to be a webview issue, I'll see if I can get it moving upstream but in any case as far as my own code goes we're good thanks again for all the help
you're welcome
probably drag and drop is disabled for the web view
either a bug in vscode, a preventive measure or something else