标签: drag-and-drop

我成功地实现了UICollectionView在屏幕上显示一些虚拟文本的功能。一切工作正常，现在我添加了拖动功能实现self.collectionView.dragDelegate = self和UICollectionViewDelegateFlowLayout，但它不起作用。我还缺少什么吗？

final class XptoComponent: UIView {

    private var titles = ["Xpto 1", "Xpto 2", "Xpto 3", "Xpto 4", "Xpto 5", "Xpto 6", "Xpto 7", "Xpto 8", "Xpto 9"]

    private var collectionView: UICollectionView = {

        let collectionViewLayout = UICollectionViewFlowLayout()
        collectionViewLayout.minimumInteritemSpacing = 0
        collectionViewLayout.minimumLineSpacing = 0
        collectionViewLayout.itemSize = CGSize(width: UIScreen.main.bounds.size.width, height: NumericConstant.ViewCell.height)
        collectionViewLayout.sectionInset = .zero

        let collectionView = UICollectionView(frame: .zero, collectionViewLayout: collectionViewLayout).usingAutoLayout()
        collectionView.registerCell(XptoCollectionViewCell.self)

        return collectionView
    }()

    init() {

        super.init(frame: .zero)

        self.collectionView.dataSource = self
        self.collectionView.delegate …

我有 Draggable 元素，在它的内部，我有一个带有 onClick 事件的组件。拖动结束时，触发点击事件。我的可拖动元素如下所示。我使用了一个名为react-draggable的包。

<Draggable
    position={this.state.realPosition}
    onStart={this.handleStart}
    onDrag={this.handleDrag}
    onStop={this.handleStop}
    disabled={this.state.isDialogOpen}
    bounds="parent">
      <div style={{"width":"fit-content"}}>
        <Helmet getDialogStatus={this.handleClick} />  
      </div>
</Draggable>

我在 Helmet 组件内有 onClick 事件，它会打开一个对话框。当我拖动并释放该元素时，将打开此对话框。我的问题是如何防止这种行为以及如何将这些事件与事件分开？

谢谢。

我正在尝试创建可以拖放的圆圈。

我可以让它仅与第一个圆一起工作，但是，第一个圆之后的任何东西都不起作用。

预期行为：拖动时圆圈跟随我的光标，并在拖动结束时落在最终位置

实际行为：圆圈跟随光标的水平位置，但不跟随垂直位置（垂直位置始终明显低于光标）

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(alignment: .center) {
            ForEach(0..<5) { _ in
                DraggableCircles()
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct DraggableCircles: View {
    @State var dragAmount: CGPoint = CGPoint.zero

        var body: some View {
            Circle().fill(Color.red)
            .frame(width: 50, height: 50)
                .gesture(
                    DragGesture(coordinateSpace: .global).onChanged {action in
                        let location = action.location
                        let newWidth = location.x
                        let newHeight = location.y
                        let size …

我正在尝试使用范围滑块旋转元素，但每次拖动元素时，它都会在拖动时丢失旋转值，并且还会更改框的位置并将其放置在开头。\n我正在附加指向我在 stackblitz 中创建的简单测试项目的链接，以便我可以重新创建我遇到的问题。

stackblitz 拖动和旋转示例

有人可以指导我解决方案吗？

我将代码放在这里，以防有人无法正常工作测试项目的链接：

应用程序模块.ts

import { NgModule } from "@angular/core";\nimport { BrowserModule } from "@angular/platform-browser";\nimport { FormsModule } from "@angular/forms";\n\nimport { DragDropModule } from "@angular/cdk/drag-drop";\n\nimport { AppComponent } from "./app.component";\nimport { HelloComponent } from "./hello.component";\n\n@NgModule({\n  imports: [BrowserModule, FormsModule, DragDropModule],\n  declarations: [AppComponent, HelloComponent],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {}\n

应用程序组件.ts

import { Component, Renderer2 } from "@angular/core";\n\n@Component({\n  selector: "my-app",\n  templateUrl: "./app.component.html",\n  styleUrls: ["./app.component.css"]\n})\nexport class AppComponent {\n  rotateValue = 0;\n  dragPosition = …

我正在执行一项任务，其中涉及拖动图像并检查其放置位置，如果放置在正确的位置则执行操作。虽然它在任何有鼠标的设备上都可以正常工作，但在触摸屏上却不起作用。如何在触摸屏上实现这一目标。使用 Vuejs 2 或 vanilla javascript

拖动项目

<v-row v-for="(item, iterator) in Activity.drag_items" :key="item.class" :class="[item.class, item.status]" class="drag-item">
   <v-img 
      draggable
      @dragstart='startDrag($event, item, iterator)'
      :src="require(`@/assets/img/activities/activity_2/${item.item_img}`)"
      contain
      :class="item.status"
   ></v-img>
</v-row>

掉落物品

<a @drop='onDrop($event, Activity)' @dragover.prevent @dragenter.prevent></a>

拖动功能

startDrag(evt, item, index){
        evt.dataTransfer.dropEffect = 'move';
        evt.dataTransfer.effectAllowed = 'move';
        evt.dataTransfer.setData('item', JSON.stringify(item));
        evt.dataTransfer.setData('index', index);
    }

掉落功能

onDrop(evt, galaxy_location) {}

我们有一个显示统计信息的仪表板，类似于海报丰富的react-admin演示（https://marmelab.com/react-admin-demo/#/）。

我们希望找到一种方法来允许用户将小部件拖动到自定义配置中。

关于用于拖放的反应库有什么想法可以很好地解决这个问题吗？

谢谢

我的桌面上似乎没有安装桌面图标 NG (DING)。我无法从桌面或桌面中拖放项目。当我尝试手动安装它时，它会显示如下内容：

这是您当前模式启用的扩展。无法安装。

但是没有安装...

即使在设置中它也没有显示出来。

我想知道如何绑定拖放事件以重新排列列表中的项目。

这是我的代码：

<PageTitle>Drag & Drop</PageTitle>

<ul style="border:1px solid black">
    @foreach (var item in Items)
    {
        <li draggable="true" @* draggable *@
            @key=@item.Id
            id="@item.Id"              
            @* how to bind drag events? *@
        >@item.Label</li>
    }
</ul>

@code {
    public class Item
    {
        public int Id {get; set;}
        public string Label {get; set; } = default!;
    }
    public List<Item> Items = new() {
        new Item(){Id= 1, Label = "hi 1"},
        new Item(){Id= 2, Label = "hi 2"},
        new Item(){Id= 3, Label = "hi 3"},
        new …

我正在尝试使用 WinUI3 进行拖放操作。在 WPF 中，我曾经将AllowDrop和Drop添加到 UI 元素中，并且能够接收已删除文件的文件名。然而，在 WinUI3 中，Drop 方法并未被执行。我究竟做错了什么？

XAML

<Page
    x:Class="..."
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="..."
    xmlns:helper="..."
    xmlns:prop="..."
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
  <Page.Resources>
    <DataTemplate x:Key="Image"  x:DataType="helper:ProductImage">
      <Border BorderBrush="{x:Bind Path=Color, Mode=OneWay}" BorderThickness="1" Background="Transparent"
              AllowDrop="True" Drop="Image_Drop" >
        <Grid Width="{Binding ElementName=PIImageSize, Path=Value}" 
              Height="{Binding ElementName=PIImageSize, Path=Value}" >
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
          </Grid.RowDefinitions>
          <TextBlock Grid.Row="0" Margin="2" HorizontalAlignment="Center"
                     Text="{x:Bind Path=Type, Mode=OneWay}" 
                     Foreground="{x:Bind Path=Color, Mode=OneWay}" />
          <Image Grid.Row="1" Stretch="Uniform" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Source="{x:Bind Path=BitmapImage, Mode=OneWay}"/>
          <TextBox Grid.Row="2" …

我有一个由via和拖放模式QListWidget填充的，当我在列表中移动项目时，其标签会消失。QLabel.setItemWidget()InternalMove

我该如何解决这个问题？

一个最小的重现示例

from PyQt5.QtWidgets import (
    QApplication, QLabel, QStyle,
    QListWidget, QListWidgetItem
)
from PyQt5.QtCore import QSize
import sys


if __name__ == '__main__':
    app = QApplication(sys.argv)

    list = QListWidget()
    list.setFixedHeight(400)
    list.setDragDropMode(QListWidget.DragDropMode.InternalMove)

    for _ in range(8):
        item = QListWidgetItem()
        item.setSizeHint(QSize(40, 40))
        list.addItem(item)

        label = QLabel()
        label.setPixmap(list.style().standardIcon(
            QStyle.StandardPixmap.SP_ArrowUp).pixmap(QSize(40,40)))
        list.setItemWidget(item, label)

    list.show()

    sys.exit(app.exec())

编辑

阅读其说明文档后.setItemWidget()：

此函数只能用于在列表小部件项目的位置显示静态内容。如果您想显示自定义动态内容或实现自定义编辑器小部件，请改用 QListView 和 QStyledItemDelegate 子类。

我想知道这是否与该问题有关，在这种情况下“静态内容”意味着什么，被QLabel视为“动态内容”？

编辑#2

问题是在 a 内部dropEvent()被dropMimeData()调用，这又创建了一个完整的新项目？（rowsInserted被调用），我猜这对于 self 项目不应该发生，因为拖动项目中设置的小部件没有序列化并存储在内部mimedata …