Title: Drag behavior for text being dragged into datatable is incomplete/odd · Issue #954 · plotly/dash-table · GitHub
Open Graph Title: Drag behavior for text being dragged into datatable is incomplete/odd · Issue #954 · plotly/dash-table
X Title: Drag behavior for text being dragged into datatable is incomplete/odd · Issue #954 · plotly/dash-table
Description: Editable datatables are powerful awesome ways to let your users configure various application data members. I've been working to implement a convenience feature that allows users to drag text (using the typical html drag via a client sid...
Open Graph Description: Editable datatables are powerful awesome ways to let your users configure various application data members. I've been working to implement a convenience feature that allows users to drag text (usin...
X Description: Editable datatables are powerful awesome ways to let your users configure various application data members. I've been working to implement a convenience feature that allows users to drag text (...
Opengraph URL: https://github.com/plotly/dash-table/issues/954
X: @github
Domain: github.com
{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Drag behavior for text being dragged into datatable is incomplete/odd","articleBody":"Editable datatables are powerful awesome ways to let your users configure various application data members. I've been working to implement a convenience feature that allows users to drag text (using the typical html drag via a client side callback) into cells to quickly populate them. This involves adding the draggable=true property to the Span containing the text, then attaching a callback of the flavor of:\r\n```\r\nitem.addEventListener(\"dragstart\", function(e) {\r\n e.dataTransfer.setData('text/plain', item.innerText);\r\n}, false);\r\n```\r\nYou could do this with the EventListener extension too I imagine to make it more Dash-like.\r\n\r\nThe issue (which doesn't require you to implement that, just find a draggable element like this: https://www.kryogenix.org/code/browser/custom-drag-image.html and test with it) is that the only time the transferred data actually gets put into the cell is if the cell is already in focus/highlighted AND is empty. So a cell in focus with text in it already will not receive the transfer. A cell not in focus but empty will also not receive the data.\r\n\r\nSome screenshots to illustrate:\r\n\r\nSuccessfully dragging text into a cell:\r\n\r\n\r\nAll other instance (note the red No symbol where the mouse is):\r\n\r\n\r\nOne other oddity I've noticed is that very occasionally, you _can_ drag text onto a cell which already contains text AND is in focus, and it will just prepend the text to the left. I can't seem to reliably reproduce this behavior though.\r\n\r\nOne thought I had was to manually modify the focus on mouseover or mouseup while the drag event is in process, but I would also need to go in and delete existing data on mouseup which seems problematic.\r\n\r\nThis behavior applies to any editable data table, but please let me know if my description is insufficient.","author":{"url":"https://github.com/kevroy314","@type":"Person","name":"kevroy314"},"datePublished":"2022-12-23T19:53:18.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/954/dash-table/issues/954"}
| route-pattern | /_view_fragments/issues/show/:user_id/:repository/:id/issue_layout(.:format) |
| route-controller | voltron_issues_fragments |
| route-action | issue_layout |
| fetch-nonce | v2:1622309d-8baf-a7c6-1b51-c8f014c2f699 |
| current-catalog-service-hash | 81bb79d38c15960b92d99bca9288a9108c7a47b18f2423d0f6438c5b7bcd2114 |
| request-id | C380:12D7DC:A36588F:DC2624B:6A5EAE04 |
| html-safe-nonce | 1631620fb52a7a67d0595961036f5ad0e86eb5cf1c8fb13448cfed5ccf4b3496 |
| visitor-payload | eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiJDMzgwOjEyRDdEQzpBMzY1ODhGOkRDMjYyNEI6NkE1RUFFMDQiLCJ2aXNpdG9yX2lkIjoiNDYxMjIwNjAwMzMxMjU2OTg2MCIsInJlZ2lvbl9lZGdlIjoiaWFkIiwicmVnaW9uX3JlbmRlciI6ImlhZCJ9 |
| visitor-hmac | ca31d2b659f509980716e993928b4975da865652abb3021c0abdf632313eae98 |
| hovercard-subject-tag | issue:1509734294 |
| github-keyboard-shortcuts | repository,issues,copilot |
| google-site-verification | Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I |
| octolytics-url | https://collector.github.com/github/collect |
| analytics-location | / |
| fb:app_id | 1401488693436528 |
| apple-itunes-app | app-id=1477376905, app-argument=https://github.com/_view_fragments/issues/show/plotly/dash-table/954/issue_layout |
| twitter:image | https://opengraph.githubassets.com/a20ce478f8894354a2e36dd494552114bdd6a61ebdc27d46983faa72405cd34a/plotly/dash-table/issues/954 |
| twitter:card | summary_large_image |
| og:image | https://opengraph.githubassets.com/a20ce478f8894354a2e36dd494552114bdd6a61ebdc27d46983faa72405cd34a/plotly/dash-table/issues/954 |
| og:image:alt | Editable datatables are powerful awesome ways to let your users configure various application data members. I've been working to implement a convenience feature that allows users to drag text (usin... |
| og:image:width | 1200 |
| og:image:height | 600 |
| og:site_name | GitHub |
| og:type | object |
| og:author:username | kevroy314 |
| hostname | github.com |
| expected-hostname | github.com |
| None | 7129250e6854dcc7bfa46fc877bb154b96762b31e3fa82fdf0697c71f08bb32c |
| turbo-cache-control | no-preview |
| go-import | github.com/plotly/dash-table git https://github.com/plotly/dash-table.git |
| octolytics-dimension-user_id | 5997976 |
| octolytics-dimension-user_login | plotly |
| octolytics-dimension-repository_id | 128151266 |
| octolytics-dimension-repository_nwo | plotly/dash-table |
| octolytics-dimension-repository_public | true |
| octolytics-dimension-repository_is_fork | false |
| octolytics-dimension-repository_network_root_id | 128151266 |
| octolytics-dimension-repository_network_root_nwo | plotly/dash-table |
| turbo-body-classes | logged-out env-production page-responsive |
| disable-turbo | false |
| browser-stats-url | https://api.github.com/_private/browser/stats |
| browser-errors-url | https://api.github.com/_private/browser/errors |
| release | 3084c198d559e243975a7a7f61d0b80bcea2a724 |
| ui-target | full |
| theme-color | #1e2327 |
| color-scheme | light dark |
Links:
Viewport: width=device-width