drag-and-drop 相关问题

React js 拖放带有预览的图像

我有这个功能来设置我的可变图像和预览图像： const handleChangeImage = 事件 => { setPreviewImage(URL.createObjectURL(event.target.files[0])); setImage( 事件.target.

reactjs drag-and-drop

回答 1 投票 0

将文件拖放到 Microsoft Access 中

我在 Microsoft Access 中有一个表单，允许用户将附件上传到每条记录。我想通过让用户将文件拖放到附件字段中来使其更加用户友好。什么...

ms-access drag-and-drop vba ms-access-2010

回答 3 投票 0

SwiftUI：如何从 macOS 上的联系人中拖放联系人

我正在尝试将联系人从联系人拖到我的应用程序中。这是我更新的代码：导入 SwiftUI 导入统一类型标识符让 uttypes = [UTType.contact, UTType.emailMessage] 结构

macos swiftui drag-and-drop contacts

回答 2 投票 0

如何让Drag元素始终位于顶部？

这是 Qt 拖放示例。正如您在这里所看到的，第 5 个图块位于第 6 个图块下方，第 5 个图块可以位于第 4 个图块上方。但我希望拖动元素始终高于一切......

qt drag-and-drop qml qtquick2 qt6

回答 1 投票 0

VirtualBox 从主机拖放到来宾无法正常工作

我使用 Windows 10 作为主机，使用 Ubuntu 14.04.3 Linux 作为 VirtualBox VM 的来宾操作系统。即使在我的虚拟机上安装“来宾添加”并将“拖放”设置为“双向”之后...

drag-and-drop virtual-machine virtualbox

回答 4 投票 0

JavaScript 中的拖放重置问题

const grid = document.querySelector('.grid'); const leftDiv = document.querySelector('.left-side') const rightDiv = document.querySelector('.right-side'); const btn = document.querySelector('.btn');

javascript html css events drag-and-drop

回答 1 投票 0

react-beautiful-dnd 多个动态列表的问题

我有 10 个手风琴，上面有映射。每个手风琴内部有 10 个项目。项目只能在自己的手风琴内部移动。我的问题是我当前的代码逻辑与第一个 acco 配合得很好...

javascript reactjs drag-and-drop react-beautiful-dnd

回答 1 投票 0

拖放库 dnd-kit 在我的 React 示例中不起作用

我一直在尝试为 React 实现一个名为 dnd-kit 的拖放库。我一直在使用覆盖排序列表指南的帮助下研究一个非常基本的示例，但它不起作用，我......

reactjs drag-and-drop dnd-kit

回答 1 投票 0

触发器：拖动时悬停选择器

我遇到了关于我目前正在开发的拖放系统的问题。我在 div 上有一个 :hover 样式，用户可以在上面放置一些东西。当我将鼠标悬停在它上面时它就可以工作，但不能...

jquery css drag-and-drop hover draggable

回答 2 投票 0

如何删除flutter ReorderableListView中的菜单图标

当我使用 flutter 创建 ReordableListView 时，默认会出现一些图标（右侧）：我想删除它们，因为我想在这个地方放置其他图标，当我...

list flutter dart drag-and-drop icons

回答 2 投票 0

拖放不带“file://”的 NSURL

我正在实现我的拖放方法。我需要当用户在我的应用程序窗口上拖动某些内容时我可以获取该文件 URL。 NSURL 需要转换为 char。没关系。但如何删除 file:// fr...

objective-c xcode macos cocoa drag-and-drop

回答 4 投票 0

有什么办法可以让这个拖放变成拖放和重新排列/重新排序吗？

我正在尝试拖放，效果很好，这是一个草图。 const container = document.querySelector(".drag-container"); 常量模板=` 我正在尝试拖放，效果很好，这是一个草图。 const container = document.querySelector(".drag-container"); const template = ` <div draggable="true" class="draggable-box"> <div class="component draggable" id="%id%"> <button> <i class="fa-solid fa-lightbulb"></i> </button> <span>%name%</span> </div> </div>`; var items,dragSrcEl,currentlyOveredItem; const fillDragContainer = function () { for (let i = 0; i < 10; i++) { let friendlyIndex = i+1; let html = template.replace("%id%", `comp_${friendlyIndex}`).replace("%name%", `Name ${friendlyIndex}`); container.insertAdjacentHTML("beforeend", html); } addEventsToElements(); } const handleDragStart = function(e) { this.style.opacity = '0.4'; dragSrcEl = this; e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/html', this.innerHTML); } const handleDragEnd = function(e) { this.style.opacity = '1'; items.forEach(function (item) { item.classList.remove('over'); }); } const handleDragOver = function(e) { e.preventDefault(); return false; } const handleDragEnter = function(e) { currentlyOveredItem = this; removeOverClassFromEveryItem(); this.classList.add('over'); } const handleDragLeave = function(e) { if( this == currentlyOveredItem ){ return; } this.classList.remove('over'); } const handleDrop = function(e) { e.stopPropagation(); // stops the browser from redirecting. if (dragSrcEl !== this) { dragSrcEl.innerHTML = this.innerHTML; this.innerHTML = e.dataTransfer.getData('text/html'); } return false; } const removeOverClassFromEveryItem = function(){ items.forEach(function(item){ item.classList.remove('over'); }); } const addEventsToElements = function () { items = document.querySelectorAll(".draggable-box"); items.forEach(function (item) { item.addEventListener('dragstart', handleDragStart); item.addEventListener('dragend', handleDragEnd); item.addEventListener('dragover', handleDragOver); item.addEventListener('dragenter', handleDragEnter); item.addEventListener('dragleave', handleDragLeave); item.addEventListener('drop', handleDrop); }); } const removeEvents = function(){ items.forEach(function(item){ item.removeEventListener('dragstart', handleDragStart); item.removeEventListener('dragend', handleDragEnd); item.removeEventListener('dragover', handleDragOver); item.removeEventListener('dragenter', handleDragEnter); item.removeEventListener('dragleave', handleDragLeave); item.removeEventListener('drop', handleDrop); }); } fillDragContainer(); .components{ display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); align-content: baseline; gap: 2em; padding: 10px; } .component{ gap: 5px; max-width: 80px; display: flex; flex-direction: column; justify-content:center; align-items:center; padding: 10px; text-align:center; cursor: grab; } .component:hover{ border: 1px solid gray; } .component button{ width: 30px; height: 30px; } <script src="https://kit.fontawesome.com/a26f6e4ee4.js"></script> <div class="components drag-container"> </div> 在codepen上：https://codepen.io/drrandom/pen/VwqYmQa?editors=1011 我想知道我是否可以做到这一点，这样当我放置它时它不会替换可拖动组件，而是重新排列整个 div 的内容并将其放置到位。就像某种可排序的列表。像这样的codepen：https://codepen.io/siniger/pen/gOLmrob但没有任何第三方库并且在网格系统中。所以我已经部分解决了这个问题。它一点也不优雅，但它确实有效。我只需要创建一个类似代码的库，以便能够标准化它并使其更加健壮和干净。这个想法是，如果我拖动一个元素，我将在它之前插入一个空容器。在新的拖动事件上删除以前的空容器，并将拖动的元素放置到放置时的空容器中。这样所有其他元素都会被推送，因为我插入了一个新的空容器。 const container = document.querySelector(".drag-container"); const template = ` <div draggable="true" class="draggable-box"> <div class="component draggable" id="%id%"> <button> <i class="fa-solid fa-lightbulb"></i> </button> <span>%name%</span> </div> </div>`; const emptyTemplate = ` <div id="empty-drag-element" draggable="true" class="draggable-box"> </div>`; var items,dragSrcEl,currentlyOveredItem,lastDraggedOverElement; const fillDragContainer = function () { for (let i = 0; i < 10; i++) { let friendlyIndex = i+1; let html = template.replace("%id%", `comp_${friendlyIndex}`).replace("%name%", `Name ${friendlyIndex}`); container.insertAdjacentHTML("beforeend", html); } addEvents(); } const handleDragStart = function(e) { this.style.opacity = '0.4'; dragSrcEl = this; e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/html', this.innerHTML); } const handleDragEnd = function(e) { this.style.opacity = '1'; items.forEach(function (item) { item.classList.remove('over'); }); } const handleDragOver = function(e) { e.preventDefault(); let draggedOverElement = e.target.closest(".draggable"); if( lastDraggedOverElement == draggedOverElement ){ return; } lastDraggedOverElement = draggedOverElement; addEmptyTemplate(lastDraggedOverElement); return false; } var lastEmptyTemplate; const addEmptyTemplate = function(element){ if( !element ){return;} removeEmptyTemplate(); element = element.closest(".draggable-box"); //console.log("Adding empty element before", element); element.insertAdjacentHTML("beforebegin", emptyTemplate); lastEmptyTemplate = document.querySelector("#empty-drag-element"); //console.log("lastEmptyTemplate", lastEmptyTemplate); addEvents(); } const removeEmptyTemplate = function(){ if( !lastEmptyTemplate ){ return; } console.log("Removing empty template", lastEmptyTemplate); lastEmptyTemplate.remove(); lastEmptyTemplate = null; } const handleDragEnter = function(e) { currentlyOveredItem = this; removeOverClassFromEveryItem(); this.classList.add('over'); } const handleDragLeave = function(e) { if( this == currentlyOveredItem ){ return; } this.classList.remove('over'); } const handleDrop = function(e) { e.stopPropagation(); // stops the browser from redirecting. if( !lastEmptyTemplate ){ return; } lastEmptyTemplate.innerHTML = e.dataTransfer.getData('text/html'); dragSrcEl.remove(); lastEmptyTemplate.removeAttribute("id"); lastEmptyTemplate = ""; //if (dragSrcEl !== this) { //dragSrcEl.innerHTML = this.innerHTML; //this.innerHTML = e.dataTransfer.getData('text/html'); //} return false; } const removeOverClassFromEveryItem = function(){ items.forEach(function(item){ item.classList.remove('over'); }); } const addEvents = function () { removeEvents(); items = document.querySelectorAll(".draggable-box"); items.forEach(function (item) { item.addEventListener('dragstart', handleDragStart); item.addEventListener('dragend', handleDragEnd); item.addEventListener('dragover', handleDragOver); item.addEventListener('dragenter', handleDragEnter); item.addEventListener('dragleave', handleDragLeave); item.addEventListener('drop', handleDrop); }); } const removeEvents = function(){ if( !items ){ return; } items.forEach(function(item){ item.removeEventListener('dragstart', handleDragStart); item.removeEventListener('dragend', handleDragEnd); item.removeEventListener('dragover', handleDragOver); item.removeEventListener('dragenter', handleDragEnter); item.removeEventListener('dragleave', handleDragLeave); item.removeEventListener('drop', handleDrop); }); } fillDragContainer();

javascript html drag-and-drop

回答 1 投票 0

JavaScript 拖放 - 拖动副本

我正在尝试创建一个强大的拖放事件调度程序。我几乎已经完成了所有内容，但仍停留在一个元素上：如何拖动项目的副本。您可以看到当前版本正在运行

javascript jquery jquery-ui drag-and-drop

回答 1 投票 0

WPF MVVM 中的数据绑定手动更新

我的视图模型：视图模型类 { 公共字符串文件名 {get;set;} } 在我的视图中，我将标签的内容绑定到 ViewModel 的文件名。现在，当我将文件拖放到我的视图中时，如何更新

mvvm drag-and-drop binding

回答 1 投票 0

JavaScript 可排序列表中的拖放问题

大家好，这是我的第一个问题：我目前正在开发一个 Web 应用程序，该应用程序涉及对单独列表中的项目进行拖放排序。我有两个不同的列表：左侧列表和...