标签: drag-and-drop

请帮我解决这个问题......我QListView在左边有一个QWidget，在另一边有一个。在QListView我使用QStandardItem. 现在我想将QListView项目拖放到另一边QWidget，我也必须对项目做同样的事情QWidget。我可以通过使用将我的QListView项目拖放到QListView自身内部

listView.setAcceptDrops(true);
listView.setDragEnabled(true);
listView.setDragDropMode(QAbstractItemView::InternalMove); 

这单独在 QListView 中工作正常。我想将 QListView 项目拖放到另一个小部件。我怎样才能做到这一点？我知道我必须像处理这样的事件

void dropEvent(QDropEvent *);
void dragMoveEvent(QDragMoveEvent *);
void dragEnterEvent(QDragEnterEvent *);
void mousePressEvent(QMouseEvent *);

我只是这样试过

void Example::dragMoveEvent(QDragMoveEvent *e)
{
    // The event needs to be accepted here
    e->accept();
}

void Example::dragEnterEvent(QDragEnterEvent *e)
{
    // Set the drop action to be the proposed action.
    e->acceptProposedAction();
}

void Example::dropEvent(QDropEvent *e)
{
    qDebug("Items Dropped");
} …

我正在尝试向我动态创建的图像添加一个 ondragstart 处理程序：

var image = new Image();
    image.src = "https://www.filepicker.io/api/file/JhJKMtnRDW9uLYcnkRKW";
    image.onload = function(event){
        this.ondragstart = drag(event);
        divImage.appendChild(this);
    };
function drag(ev)
    {
        ev.dataTransfer.setData("Text",ev.target.id);
    }

但是，我收到错误消息：Uncaught TypeError: Cannot call method 'setData' of undefined

我已经尝试过使用通过 dom 加载的静态图像，它工作正常，但为什么我的动态生成的图像不起作用？出于某种原因，在拖动功能中，当它是动态创建的图像时，ev 不包含 dataTransfer 对象？有谁知道为什么？

这就是我想要做的： http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop 除了，我希望能够通过 javascript 动态创建图像，并将 ondragstart 处理程序添加到它。

谢谢，

private void PBoxJigsaw1_MouseUp(object sender, MouseEventArgs e)
    {
        if (sender != null && sender.GetType() == typeof(PictureBox))
        {
            if (e.Button == System.Windows.Forms.MouseButtons.Left)
            {
                PictureBox answer = (PictureBox)sender;

                if (answer.Location.X < pnlJigsaw5.Location.X && answer.Location.Y > pnlJigsaw5.Location.Y)
                {
                    if (answer.Location.X + answer.Width > pnlJigsaw5.Location.X)
                    {
                        if ((answer.Location.X + answer.Width) < pnlJigsaw5.Location.X + pnlJigsaw5.Width)
                        {
                            answer.Location = pnlJigsaw5.Location;
                        }
                    }
                }
                else if (answer.Location.X < pnlJigsaw1.Location.X && answer.Location.Y > pnlJigsaw1.Location.Y)
                {
                    if (answer.Location.X + answer.Width > pnlJigsaw1.Location.X)
                    {
                        if ((answer.Location.X + answer.Width) < pnlJigsaw1.Location.X + …

我正在尝试在我的 WPF 应用程序中实现拖放功能。我有一个列表框，我希望能够从 Windows 资源管理器中删除文件。然后将这些文件添加到列表框中。我曾经按照本教程进行过这项工作：将文件拖放到 WPF 应用程序并异步上传到 ASP.NET Web API。减去上传到 web api 部分。我只想显示列表框中的文件。

问题是 DragOver 事件永远不会触发。我错过了什么？我早些时候有这个工作，但一些小的调整把它搞砸了。

这是我的 XAML（简化了父元素）：

<Window>
  <Grid>
    <TabControl>
      <TabItem>
        <Grid>
          <GroupBox>
            <ListBox Name="lstTarget" AllowDrop="True"
                     Drop="lstTarget_Drop"
                     DragOver="lstTarget_DragOver"
                     DragLeave="lstTarget_DragLeave"
                     BorderThickness="3"
                     BorderBrush="Red"
                     >
            </ListBox>

这是我的代码

private void lstTarget_Drop(object sender, DragEventArgs e)
{
    if (e.Data.GetDataPresent(DataFormats.FileDrop))
    {
        string[] files = (string[])e.Data.GetData(DataFormats.FileDrop);
        foreach (string filePath in files)
        {
            lstTarget.Items.Add(filePath);
        }
    }

    var listbox = sender as ListBox;
    listbox.Background = new SolidColorBrush(Color.FromRgb(226, 226, 226));
}
private void lstTarget_DragOver(object sender, DragEventArgs e)
{ …

我已经看到很多关于如何将tabpane的标签拖动到另一个标签上的方法,顺便说一下我没有看到这一点,我想它在某种程度上可能有用,但最自然的应用程序应该是重新排序标签的相同的tabpane,似乎没有人在互联网上谈论的事情.

我想要几乎所有浏览器都实现的行为.

我尝试了一些东西,但它没有做我想要的.主要的问题来自于一个事实,即Tab不能与约束setOnDragDetected,setOnDragOver导致过于复杂的算法来弥补图书馆的这一弱点等的方法(出于某种原因,通过的方式......脱离了我).

所以这是我的代码,它没有做我想要的,因为(而且它只是一种解决方法)我只检测掉落后的"丢弃目标",从而使它无用.是的,由于某些原因,在按住单击按钮的同时悬停对象不会导致mouseover事件...

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.scene.input.ClipboardContent;
import javafx.scene.input.Dragboard;
import javafx.scene.input.TransferMode;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class DragAndDrop extends Application
{
    public void start(Stage primaryStage)
    {
        TabPane tabPane = new TabPane();

        final int[] target = {0};

        for(int i = 0 ; i < 2 ; i ++)
        {
            Tab tab = new Tab();
            tab.setClosable(false);

            int index[] = {i};

            tabPane.getTabs().add(tab);

            Label label …

我可能犯了一个简单的错误，但是我根本无法将文件拖放到NSCollectionView上以正常工作。

在一个测试项目中，我在窗口上有一个NSCollectionView，而视图控制器既是其委托者，又是数据源。我希望能够将文件从Finder拖到该集合视图中。

通过阅读文档，我要做的就是：

注册拖动类型：

- (void)viewDidLoad {

    [super viewDidLoad];
    // Do any additional setup after loading the view.

    NSLog(@"Registering dragged types for collection view: %@", self.collectionView);
    [self.collectionView registerForDraggedTypes:@[NSFilenamesPboardType]];
    [self.collectionView setDraggingSourceOperationMask:NSDragOperationEvery forLocal:YES];
    [self.collectionView setDraggingSourceOperationMask:NSDragOperationEvery forLocal:NO];
}

然后实现这两种方法：

-(NSDragOperation)collectionView:(NSCollectionView *)collectionView validateDrop:(id<NSDraggingInfo>)draggingInfo proposedIndex:(NSInteger *)proposedDropIndex dropOperation:(NSCollectionViewDropOperation *)proposedDropOperation {

    NSLog(@"Validate drop: %@", draggingInfo);

    return NSDragOperationMove;
}

-(BOOL)collectionView:(NSCollectionView *)collectionView acceptDrop:(id<NSDraggingInfo>)draggingInfo index:(NSInteger)index dropOperation:(NSCollectionViewDropOperation)dropOperation {

    NSLog(@"Accept drop: %@", draggingInfo);

    return YES;
}

但是，当我尝试将一个项目拖到集合视图上时，这两种方法都不会被调用，这使我认为 registerForDraggedTypes:调用无法按预期方式工作。

这可能是什么问题？我还需要研究什么？

我想在滚动视图的内容上实现拖放。

问题是，当您尝试在滚动视图中拖动项目时，无法滚动视图。

首先，我尝试通过IDragHandler，IBeginDragHandler，IEndDragHandle和IDropHandler接口实现拖放。乍一看，它工作得很好，但问题是您无法滚动ScrollRect。

我认为问题是由于重载造成的，当我使用事件触发器与拖动一样像rect rect时，父触发器无法正常工作。

因此，在那之后，我自己思考了一下，并通过IPointerDown，IPointerUp接口和在ScrollRect中保留可拖动UI的特定时间来实现它，如果您没有在特定时间保持它，则滚动工作会很好。

但是问题是通过启用在保持时间结束时在OnDrag，OnBeginDrag和OnEndDrag函数之前编写的DragHandler脚本不起作用。

首先我想知道有什么方法可以调用这些函数吗？

其次，有什么方法可以在不使用拖动界面的情况下实现拖放UI？

DragHandler：

using System;
using UnityEngine;
using UnityEngine.EventSystems;

public class DragHandler : MonoBehaviour, IDragHandler, IBeginDragHandler, IEndDragHandler
{
    public static GameObject itemBeingDragged;

    private Vector3 startPos;

    private Transform startParent;

    DragHandler dragHandler;

    public void Awake()
    {
        dragHandler = GetComponent<DragHandler>();
    }

    public void OnBeginDrag(PointerEventData eventData)
    {
        Debug.Log("Begin");
        itemBeingDragged = gameObject;
        startPos = transform.position;
        startParent = transform.parent;
    }

    public void OnDrag(PointerEventData eventData)
    {
        Debug.Log("Drag");
        transform.position = Input.mousePosition;
    }

    public void OnEndDrag(PointerEventData eventData)
    {
        Debug.Log("End");
        itemBeingDragged = null; …

有多个元素，我想同时使用它们使它们可拖放react dnd。这意味着我需要将其中一个元素拖放到另一个元素上。

首先，我为MyComponent定义了dragSource。到目前为止有效。但是，如何为同一组件设置DropTarget？

import React, { Component } from 'react'
import { DragSource, DropTarget } from 'react-dnd'

const elementSource = {
  beginDrag (props) {
    return { }
  }
}
const elementTarget = {
  drop (props, monitor) { }
}

function collect (connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging(),
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver()
  }
}

class MyComponent extends Component {
  render () {
    const { connectDragSource, isDragging, connectDropTarget, isOver } = this.props

    return connectDragSource(
      <div style={{ opacity: …

尝试按照本教程进行操作，但在容器之间进行双向拖动。将问题减少到最少的代码集，我可以在列表中进行排序，但不能在列表之间进行排序。我从文档中得到的印象是，将两个可拖动对象设置为相同的组名将启用它，但是事实并非如此。

那么，我只需要允许将项目从一个列表移动到另一个列表，该怎么办？这是我尝试过的代码（同样，它非常适合在同一列表中重新排列）

<template>
<v-container fill-height fluid grid-list-md mt-0 class='about'>
    <v-layout column fill-height>
      <h1>This is an about page</h1>
      <v-layout row fill-height>
        <v-flex xs4>
          <draggable class='dragArea' v-model='peopleList'>
            <div v-for='person in peopleList' :key='person.id' :options='{group: "people"}'>{{ person.name }}</div>
          </draggable>
        </v-flex>
        <v-flex xs4>
          <draggable class='dragArea' v-model='employeeList'>
            <div v-for='person in employeeList' :key='person.id' :options='{group: "people"}'>{{ person.name }}</div>
          </draggable>
        </v-flex>
      </v-layout>
    </v-layout>
</v-container>
</template>
<script>
import draggable from 'vuedraggable'
export default {
  name: 'About',
  data () {
    return {
      employees: [{ id: 6, name: 'Pete' }, …

我有一个容器，里面有一个元素。我希望能够将元素拖动到容器内的另一个位置，并查看新的x和y坐标（其中x = 0和y = 0是容器的左上角）。

我在https://stackblitz.com/edit/material-6-mjrhg1上设置了一个基本的stackblitz ，但它不会在控制台中显示整个事件对象（“对象太大”）。在我的实际应用程序中，我可以浏览整个事件对象，但找不到描述新x和y位置的任何属性。

基本设置是这样的：

<div style="height: 200px; width=200px; background-color: yellow" class="container">
  <div 
    style="height: 20px; width: 20px; background-color: red; z-index: 10" 
    cdkDrag 
    cdkDragBoundary=".container"
    (cdkDragEnded)="onDragEnded($event)">
  </div>
</div>

我也尝试了其他一些事件，但是cdkDragEnded对我来说最有意义。

任何想法要检查哪些属性以查找x和y坐标，还是应该使用其他事件/方法？